テンプレート:Flexbox/doc/generalのソースを表示

<noinclude>{{documentation subpage|種類=[[ヘルプ:テンプレート|テンプレート]]}}</noinclude>
{{tlx|Flexbox}}の第1引数（{{para|content}}引数も利用可）には、表示するコンテンツを入力します。表組みを含むなどの理由により適切に表示されない場合は、{{tlx|Flexbox start}}と{{tlx|Flexbox end}}でコンテンツを挟む方式を採用してください。

コンテンツ内の複数の要素をまとめてひとつの子要素として扱う場合には、{{tlx|flex-item}}、もしくは{{tlx|flex-item start}}と{{tlx|flex-item end}}のペアを使用してください。

== 使用例（基本） ==
出力例の破線の枠線は、実際には出力されません。

<dl>
<dt>入力例A-2</dt>
<dd><syntaxhighlight lang="html+handlebars">
{{flexbox start}}
{| class="wikitable" style="margin-right: 1em;<!--レガシー・ブラウザ用--> margin-inline: 0;"<!--モダン・ブラウザ用-->
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}

{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|quxfoo
|quuxfoo
|corgefoo
|-
|quxbaz
|quuzbaz
|corgebaz
|}
{{flexbox end}}
</syntaxhighlight></dd>
<dt>出力例A-2（幅が広い場合）</dt>
<dd>{{flexbox start|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; min-width: 40em}}
{| class="wikitable" style="margin-right: 1em; margin-inline: 0;"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}

{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|quxfoo
|quuxfoo
|corgefoo
|-
|quxbaz
|quuzbaz
|corgebaz
|}
{{flexbox end}}</dd>
<dt>出力例A-2（幅が狭い場合）</dt>
<dd>{{flexbox start|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; max-width: 22em}}
{| class="wikitable" style="margin-right: 1em; margin-inline: 0;"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}

{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|quxfoo
|quuxfoo
|corgefoo
|-
|quxbaz
|quuzbaz
|corgebaz
|}
{{flexbox end}}</dd>
</dl>

以下のように、{{tlx|Flex-item}}や{{tlx|Flex-item start}}・{{tlx|Flex-item end}}と組み合わせて使うことで、セクション全体を左右に並べることもできます。

<dl>
<dt>入力例A-2</dt>
<dd><syntaxhighlight lang="handlebars">
{{flexbox start|gap=2em}}
{{flex-item start|basis=20em|margin-right-ie=2em}}
=== 使用例小見出し1 ===

色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}
{{flex-item end}}

{{flex-item start|basis=20em|margin-right-ie=0}}
=== 使用例小見出し2 ===
いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせすん
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|quxfoo
|quuxfoo
|corgefoo
|-
|quxbaz
|quuzbaz
|corgebaz
|}
{{flex-item end}}
{{flexbox end}}
</syntaxhighlight></dd>
<dt>出力例A-2（幅が広い場合）</dt>
<dd>{{flexbox start|gap=2em|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; min-width: 45em}}
{{flex-item start|basis=20em|margin-right-ie=2em}}
{{fake heading|使用例小見出し1|sub=3}}

色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}
{{flex-item end}}

{{flex-item start|basis=20em|margin-right-ie=0}}
{{fake heading|使用例小見出し2|sub=3}}
いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせすん
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|quxfoo
|quuxfoo
|corgefoo
|-
|quxbaz
|quuzbaz
|corgebaz
|}
{{flex-item end}}
{{flexbox end}}</dd>
<dt>出力例A-2（幅が狭い場合）</dt>
<dd>{{flexbox start|gap=2em|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; max-width: 22em}}
{{flex-item start|auto-min-width=1|width=calc(50% - 1em)}}
{{fake heading|使用例小見出し1|sub=3}}

色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}
{{flex-item end}}

{{flex-item start|auto-min-width=1|width=calc(50% - 1em)}}
{{fake heading|使用例小見出し2|sub=3}}
いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせすん
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|quxfoo
|quuxfoo
|corgefoo
|-
|quxbaz
|quuzbaz
|corgebaz
|}
{{flex-item end}}
{{flexbox end}}</dd>
</dl>

== 引数 ==
以下は、{{tlc|Flexbox}}・{{tlc|Flexbox start}}に共通する引数になります。また各出力例では、分かりやすいように、入力例で示す引数指定に加えて{{para|style|border: 1px dashed #888;}}の指定を追加しておこなっています。

=== direction ===
CSSの{{code|flex-direction}}{{efn2|[https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction flex-direction]（[[MDN Web Docs]]）を参照。}}を指定します。

既定値の{{code|row}}では、各要素は横並びになります。
<dl>
<dt>入力例1-1</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例1-1</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{para|direction|column}}を指定すると、各要素は縦並びになります。
<dl>
<dt>入力例1-2</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|direction=column|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例1-2</dt>
<dd>{{Flexbox|direction=column|style=border: 1px dashed #888;|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{para|direction|row-reverse}}や{{para|direction|column-reverse}}を指定すると、並び順が逆になります。
<dl>
<dt>入力例1-3</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|direction=row-reverse|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例1-3</dt>
<dd>{{Flexbox|direction=row-reverse|style=border: 1px dashed #888;|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
<dt>入力例1-4</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|direction=column-reverse|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]col]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例1-4</dt>
<dd>{{Flexbox|direction=column-reverse|style=border: 1px dashed #888;|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{para|direction|row}}以外を指定する場合は、以下の各引数の説明における上下・左右・行などを適宜、左右・上下・列などと読み換えてください。

=== wrap ===
{{Caution|{{code|nowrap}}を指定した場合、親要素や画面からはみ出す可能性が高まります。本テンプレートや親要素の指定によっては、はみ出した要素が見えなくなったり、他の要素の上にかぶさってしまったりする場合もあるため、指定には注意が必要です。}}

CSSの{{code|flex-wrap}}{{efn2|[https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap flex-wrap]（[[MDN Web Docs]]）を参照。}}を指定します。CSSとは異なり、{{para|wrap|nowrap}}ではなく{{para|wrap|wrap}}が規定値です。

既定値の{{code|wrap}}では、画面（ないし親要素や本テンプレート本体）の幅に応じて要素が改行されます。
<dl>
<dt>入力例2-1</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|style=width: 300px;|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例2-1</dt>
<dd>{{Flexbox|style=width: 300px; border: 1px dashed #888;|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{code|wrap-reverse}}を指定すると、改行される方向が上下逆になります。
<dl>
<dt>入力例2-2</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|style=width: 300px;|wrap=wrap-reverse|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例2-2</dt>
<dd>{{Flexbox|style=width: 300px; border: 1px dashed #888;|wrap=wrap-reverse|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{code|nowrap}}を指定すると、改行されなくなります。[[#wrap|本節冒頭]]の注意書きも参照してください。

<dl>
<dt>入力例2-3</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|style=width: 300px;|wrap=nowrap|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例2-3</dt>
<dd>{{Flexbox|style=width: 300px; border: 1px dashed #888;|wrap=nowrap|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

=== force-row-legacy ===
後述のとおり、複数行のフレックスボックスに対応していない古いブラウザでは、横並びのフレックスボックスを無効化するように本テンプレートは設定されています。これらのブラウザでも横並びのフレックスボックスを有効化する場合には、{{para|force-row-legacy|1}}を指定してください。

=== justify-content ===
CSSの{{code|justify-content}}{{efn2|[https://developer.mozilla.org/ja/docs/Web/CSS/justify-content justify-content]（[[MDN Web Docs]]）を参照。}}を指定します。

既定値の{{code|flex-start}}では、各要素は左寄りに配置されます。{{Code|start}}を指定した場合も基本的には同じです。
<dl>
<dt>入力例3-1</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例3-1</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{code|flex-end}}を指定すると、各要素は右寄りに配置されます。{{Code|end}}を指定した場合も基本的には同じです。
<dl>
<dt>入力例3-2</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|justify-content=flex-end|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例3-2</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|justify-content=flex-end|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{code|center}}を指定すると、各要素は中央に配置されます。
<dl>
<dt>入力例3-3</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|justify-content=center|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例3-3</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|justify-content=center|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{code|space-between}}を指定すると、各要素は間に均等な空白を開けて配置されます。
<dl>
<dt>入力例3-4</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|justify-content=space-between|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例3-4</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|justify-content=space-between|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

{{code|space-around}}を指定すると、各要素の間だけでなく左右にも空白ができます。左右の空白は、各要素間の空白よりも狭くなります。
<dl>
<dt>入力例3-5</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|justify-content=space-around|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例3-5</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|justify-content=space-around|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>{{code|space-evenly}}を指定した場合は、左右の空白も要素間の空白と同じ大きさになります。<dl>
<dt>入力例3-5</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|justify-content=space-evenly|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}
</syntaxhighlight></dd>
<dt>出力例3-5</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|justify-content=space-evenly|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:Wikidata-logo.svg|thumb|100px]]
}}</dd>
</dl>

=== align-items ===
CSSの{{code|align-items}}{{efn2|[https://developer.mozilla.org/ja/docs/Web/CSS/align-items align-items]（[[MDN Web Docs]]）を参照。}}を指定します。

既定値の{{code|stretch}}では、可変高の要素は行内で最も高さが大きい要素と同じ高さになり、それ以下に固定高の要素は上寄りに配置されます。
<dl>
<dt>入力例4-1</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}
</syntaxhighlight></dd>
<dt>出力例4-1</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}</dd>
</dl>

{{code|flex-start}}を指定すると、各要素は上寄りに配置されます。{{Code|start}}を指定した場合も基本的には同じです。
<dl>
<dt>入力例4-2</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|align-items=flex-start|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}
</syntaxhighlight></dd>
<dt>出力例4-2</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|align-items=flex-start|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}</dd>

{{code|flex-end}}を指定すると、各要素は下寄りに配置されます。{{Code|end}}を指定した場合も基本的には同じです。
<dl>
<dt>入力例4-3</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|align-items=flex-end|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}
</syntaxhighlight></dd>
<dt>出力例4-3</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|align-items=flex-end|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}</dd>

{{code|center}}を指定すると、各要素は縦中央寄りに配置されます。
<dl>
<dt>入力例4-4</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|align-items=center|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}
</syntaxhighlight></dd>
<dt>出力例4-4</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|align-items=center|
{{#tag:div||style=background:red; height: auto; min-height: 10px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
}}</dd>

{{code|baseline}}を指定すると、各要素の中の文字の縦位置が揃うような配置になります。
<dl>
<dt>入力例4-4</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|align-items=baseline|
{{#tag:div|hoge|style=background:red; height: auto; min-height: 10px; width: 100px; color: white;}}
{{#tag:div|fuga|style=background:blue; height: 50px; width: 100px; padding-top: 1em: color: white;}}
{{#tag:div|piyo|style=background:green; height: 100px; width: 100px; color: white;}}
}}
</syntaxhighlight></dd>
<dt>出力例4-4</dt>
<dd>{{Flexbox|style=border: 1px dashed #888;|align-items=baseline|
{{#tag:div|hoge|style=background:red; height: auto; min-height: 10px; width: 100px; color: white;}}
{{#tag:div|fuga|style=background:blue; height: 50px; width: 100px; padding-top: 2em; color: white;}}
{{#tag:div|piyo|style=background:green; height: 100px; width: 100px; color: white;}}
}}</dd>

=== align-content ===
{{節スタブ|date=2022年1月}}
CSSの{{code|align-content}}{{efn2|[https://developer.mozilla.org/ja/docs/Web/CSS/align-content align-content]（[[MDN Web Docs]]）を参照。}}を指定します。

=== gap ===
CSSの{{code|gap}}{{efn2|[https://developer.mozilla.org/ja/docs/Web/CSS/align-content gap]（[[MDN Web Docs]]）を参照。}}（要素間の最小余白）を指定します。既定値は<code>0 1[[Em (単位)|em]]</code>です。

後述のように[[Internet Explorer 10]]および[[Internet Explorer 11|11]]や[[Android 4.4]]、[[Opera]] 18 - 72はこのプロパティーに対応していないため、必要に応じて子要素に{{code|style{{=}}"margin-right: 1em; margin-inline: 0;"}}{{efn2|その他の[[:mw:Compatibility/ja|メディアウィキの互換性]]（2021年3月時点）がグレードC以上のブラウザはのうち、[[Firefox 63]] - [[Firefox 65|65]]以外はすべて{{code|margin-inline}}に対応している（[https://caniuse.com/mdn-css_properties_margin-inline CSS property: margin-inline]〈Can I Use〉参照）ため、{{code|margin-right}}の指定を上書きすることができます。Firefox 63 - 65では、{{code|gap}}と{{code|margin-right}}の両方が反映されます。}}のようなスタイル指定を加えてください。

1つの値を指定すると、縦横に同じ余白が設定されます。
<dl>
<dt>入力例6-1</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|style=width: 300px;|gap=50px|
{{#tag:div||style=background:red; height: 150px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
{{#tag:div||style=background:yellow; height: 75px; width: 100px;}}
}}
</syntaxhighlight></dd>
<dt>出力例6-1</dt>
<dd>{{Flexbox|style=border: 1px dashed #888; width: 300px;|gap=50px|
{{#tag:div||style=background:red; height: 150px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
{{#tag:div||style=background:yellow; height: 75px; width: 100px;}}
}}</dd>
</dl>

半角スペースを挟んで2つの値を指定した場合、1つ目が縦方向、2つ目が横方向の余白になります。
<dl>
<dt>入力例6-2</dt>
<dd><syntaxhighlight lang="handlebars">
{{Flexbox|style=width: 300px;|gap=100px 25px|
{{#tag:div||style=background:red; height: 150px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
{{#tag:div||style=background:yellow; height: 75px; width: 100px;}}
}}
</syntaxhighlight></dd>
<dt>出力例6-2</dt>
<dd>{{Flexbox|style=border: 1px dashed #888; width: 300px;|gap=100px 25px|
{{#tag:div||style=background:red; height: 150px; width: 100px;}}
{{#tag:div||style=background:blue; height: 50px; width: 100px;}}
{{#tag:div||style=background:green; height: 100px; width: 100px;}}
{{#tag:div||style=background:yellow; height: 75px; width: 100px;}}
}}</dd>
</dl>

=== style ===
{{caution|この引数によるスタイル指定は、環境によっては閲覧に不都合を生じさせる場合があるため、慎重に行うようにしてください。たとえば{{code|width}}の値によっては、一部環境で親要素をはみ出した内容が表示されなくなる虞があります。}}

{{para|style}}には任意のCSSプロパティを指定することができます。

たとえば、{{tlx|Multiple image}}など一部の要素では、親要素の幅に収まる場合でも要素が改行してしまう場合があります。このような場合には、{{para|style|width: 100%;}}を指定することを検討してください。

== 使用例（応用）==
表などで高さが異なる場合、既定の{{code|align-items: stretch;}}では、
<dl>
<dt>出力例C-1</dt>
<dd>{{flexbox start|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; min-width: 45em}}
{| class="wikitable" style="margin-right: 1em; margin-inline: 0;"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}

{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|}
{{flexbox end}}</dd>
</dl>

のように一方の表が間延びしてしまうことがあります。このような場合{{para|align-items|flex-start}}と指定すれば、

<dl>
<dt>出力例C-2</dt>
<dd>{{flexbox start|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; min-width: 45em|align-items=flex-start}}
{| class="wikitable" style="margin-right: 1em; margin-inline: 0;"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}

{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|}
{{flexbox end}}</dd>
</dl>

それぞれ異なる高さで表示されるようになります。

== ブラウザのサポート状況 ==
{{caution|Internet Explorerには、フレックスボックス関連の複数のバグがあるため、プロパティが対応している場合でも、Internet Explorer 11での閲覧確認を実施することが推奨されます。}}

[[:mw:Compatibility/ja|メディアウィキの互換性]]（2021年3月時点）がグレードAのブラウザのうち[[Android 4.3]]は、{{code|flex-wrap}}に対応しておらず、閲覧に支障をきたす表示となる虞があるため、{{code|force-row-legacy|1}}を指定しない限り、横並びのフレックスボックスは強制的に無効化されます{{efn2|name=non-flex|{{para|style}}引数の指定されたスタイルを除き、本テンプレートを使用しない場合と同様の表示となります。}}。[[Internet Explorer 11]]および[[Android 4.4]]は{{code|gap}}プロパティに対応していません。Internet Explorer11は、{{para|justify-content|space-evenly}}・{{para|align-content|space-evenly}}にも対応しておらず、いずれも{{code|space-around}}を指定した場合と同じ表示となります。

グレードCのブラウザのうち、[[Internet Explorer 9]]はFlexbox全般に対応していません{{efn2|name=non-flex}}。[[Firefox 27]]は{{code|flex-wrap}}に対応しておらず、閲覧に支障をきたす表示となる虞があるため、{{code|force-row-legacy|1}}を指定しない限り、強制的に{{para|direction|column}}を指定した場合と同様の表示となるように設定されています{{efn2|技術的には、Firefox 27が対応していない{{code|-ms-flex-flow}}・{{code|flex-flow}}で{{code|flex-direction: column;}}を上書きしています。}}。また、[[Internet Explorer 10]]および[[Opera]] 18 - 72も{{code|gap}}プロパティに対応していません。[[Microsoft Edge|Edge]] 12 - 18や[[Google Chrome|Chrome]]、[[Mozilla Firefox|Firefox]]、[[Opera]]、[[Safari]]の2017年ごろまでのバージョン、Android 4.3 - 4.4.4も{{para|justify-content|space-evenly}}・{{para|align-content|space-evenly}}に対応しておらず、いずれも{{code|space-around}}を指定した場合と同じ表示となります。<noinclude>

== 注釈 ==
{{notelist2|25em}}
</noinclude>