Template:Flexbox/doc/general

{{Flexbox}}の第1引数（|content=引数も利用可）には、表示するコンテンツを入力します。表組みを含むなどの理由により適切に表示されない場合は、{{Flexbox start}}と{{Flexbox end}}でコンテンツを挟む方式を採用してください。

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

使用例（基本）

出力例の破線の枠線は、実際には出力されません。

入力例A-2

{{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}}

出力例A-2（幅が広い場合）

ほげ	ふが	ぴよ
foo	bar	baz
foobar	barbaz	bazqux
foobaz	barqux	bazquux

ほげ	ふが	ぴよ
qux	quux	corge
quxfoo	quuxfoo	corgefoo
quxbaz	quuzbaz	corgebaz

出力例A-2（幅が狭い場合）

ほげ	ふが	ぴよ
foo	bar	baz
foobar	barbaz	bazqux
foobaz	barqux	bazquux

ほげ	ふが	ぴよ
qux	quux	corge
quxfoo	quuxfoo	corgefoo
quxbaz	quuzbaz	corgebaz

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

入力例A-2

{{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}}

出力例A-2（幅が広い場合）

使用例小見出し1

色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず

ほげ	ふが	ぴよ
foo	bar	baz
foobar	barbaz	bazqux
foobaz	barqux	bazquux

使用例小見出し2

いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせすん

ほげ	ふが	ぴよ
qux	quux	corge
quxfoo	quuxfoo	corgefoo
quxbaz	quuzbaz	corgebaz

出力例A-2（幅が狭い場合）

使用例小見出し1

色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず

ほげ	ふが	ぴよ
foo	bar	baz
foobar	barbaz	bazqux
foobaz	barqux	bazquux

使用例小見出し2

いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせすん

ほげ	ふが	ぴよ
qux	quux	corge
quxfoo	quuxfoo	corgefoo
quxbaz	quuzbaz	corgebaz

引数

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

direction

CSSのflex-directionを指定します。

既定値のrowでは、各要素は横並びになります。

入力例1-1

{{Flexbox|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}

出力例1-1

|direction=columnを指定すると、各要素は縦並びになります。

入力例1-2

{{Flexbox|direction=column|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}

出力例1-2

|direction=row-reverseや|direction=column-reverseを指定すると、並び順が逆になります。

入力例1-3

{{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]]
}}

出力例1-3

入力例1-4

{{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]]
}}

出力例1-4

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

wrap

CSSのflex-wrapを指定します。CSSとは異なり、|wrap=nowrapではなく|wrap=wrapが規定値です。

既定値のwrapでは、画面（ないし親要素や本テンプレート本体）の幅に応じて要素が改行されます。

入力例2-1

{{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]]
}}

出力例2-1

wrap-reverseを指定すると、改行される方向が上下逆になります。

入力例2-2

{{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]]
}}

出力例2-2

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

入力例2-3

{{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]]
}}

出力例2-3

force-row-legacy

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

justify-content

CSSのjustify-contentを指定します。

既定値のflex-startでは、各要素は左寄りに配置されます。startを指定した場合も基本的には同じです。

入力例3-1

{{Flexbox|
[[File:Wikipedia-logo-v2-ja.svg|thumb|100px]]
[[File:Wikimedia-logo.svg|thumb|100px]]
[[File:File:Wikidata-logo.svg|thumb|100px]]
}}

出力例3-1

flex-endを指定すると、各要素は右寄りに配置されます。endを指定した場合も基本的には同じです。

入力例3-2

{{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]]
}}

出力例3-2

centerを指定すると、各要素は中央に配置されます。

入力例3-3

{{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]]
}}

出力例3-3

space-betweenを指定すると、各要素は間に均等な空白を開けて配置されます。

入力例3-4

{{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]]
}}

出力例3-4

space-aroundを指定すると、各要素の間だけでなく左右にも空白ができます。左右の空白は、各要素間の空白よりも狭くなります。

入力例3-5

{{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]]
}}

出力例3-5

space-evenlyを指定した場合は、左右の空白も要素間の空白と同じ大きさになります。

入力例3-5

{{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]]
}}

出力例3-5

align-items

CSSのalign-itemsを指定します。

既定値のstretchでは、可変高の要素は行内で最も高さが大きい要素と同じ高さになり、それ以下に固定高の要素は上寄りに配置されます。

入力例4-1

{{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;}}
}}

出力例4-1

flex-startを指定すると、各要素は上寄りに配置されます。startを指定した場合も基本的には同じです。

入力例4-2

{{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;}}
}}

出力例4-2

flex-endを指定すると、各要素は下寄りに配置されます。endを指定した場合も基本的には同じです。

入力例4-3

{{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;}}
}}

出力例4-3

centerを指定すると、各要素は縦中央寄りに配置されます。

入力例4-4

{{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;}}
}}

出力例4-4

baselineを指定すると、各要素の中の文字の縦位置が揃うような配置になります。

入力例4-4

{{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;}}
}}

出力例4-4

hoge

fuga

piyo

align-content

CSSのalign-contentを指定します。

gap

CSSのgap（要素間の最小余白）を指定します。既定値は0 1emです。

後述のようにInternet Explorer 10および11やAndroid 4.4、Opera 18 - 72はこのプロパティーに対応していないため、必要に応じて子要素にstyle="margin-right: 1em; margin-inline: 0;"のようなスタイル指定を加えてください。

1つの値を指定すると、縦横に同じ余白が設定されます。

入力例6-1

{{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;}}
}}

出力例6-1

半角スペースを挟んで2つの値を指定した場合、1つ目が縦方向、2つ目が横方向の余白になります。

入力例6-2

{{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;}}
}}

出力例6-2

style

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

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

使用例（応用）

表などで高さが異なる場合、既定のalign-items: stretch;では、

出力例C-1

ほげ	ふが	ぴよ
foo	bar	baz
foobar	barbaz	bazqux
foobaz	barqux	bazquux

ほげ	ふが	ぴよ
qux	quux	corge

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

出力例C-2

ほげ	ふが	ぴよ
foo	bar	baz
foobar	barbaz	bazqux
foobaz	barqux	bazquux

ほげ	ふが	ぴよ
qux	quux	corge

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

ブラウザのサポート状況

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

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

注釈