Template:Flexbox start/doc

CSSでFlexboxを作成するためのテンプレートです。

使い方

{{Flexbox start}}
...
...
{{Flexbox end}}

のように、かならず{{Flexbox end}}とペアで使用します。

{{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を指定した場合と同じ表示となります。

テンプレートデータ

これはビジュアルエディターやテンプレートウィザードにより使用されるテンプレートのためのTemplateData文書です。

Flexbox start

CSSでFlexboxを作るためのテンプレートです。{{Flexbox end}}とペアで使用します。directionにrow以外を指定した場合は、各引数の説明における上下・左右・行を適宜読み替えてください。

テンプレートパラメーター

パラメーター		説明	型	状態
flex-direction	direction	要素の並び方。rowは横、columnは縦 値の候補 row row-reverse column column-reverse 既定 row	文字列	省略可能
flex-wrap	wrap	画面幅に応じて改行するか 値の候補 wrap wrap-reverse nowrap 既定 wrap	文字列	省略可能
justify-content	justify-content	要素の左右方向の余白の制御 値の候補 flex-start flex-end center space-between space-around start end space-evenly 既定 flex-start	文字列	省略可能
align-items	align-items	同じ行の要素の上下位置制御 値の候補 stretch flex-start flex-end center baseline 既定 stretch	文字列	省略可能
align-content	align-content	要素の上下方向の余白の制御 値の候補 stretch flex-start flex-end center space-between space-around start end space-evenly 既定 normal	文字列	省略可能
gap	gap	要素間の最小余白（2つ指定する場合は縦 横の順） 既定 1em 例 2em 0.5em	文字列	省略可能
style	style	任意のCSSプロパティ 例 border: 1px dashed #888;	文字列	省略可能
レガシー・ブラウザで横並びを有効化	force-row-legacy	wrapに対応していないブラウザでも横並びを有効化する 自動入力値 0	ブール値	省略可能

注釈

関連項目

段組みテンプレート

：可能

：不可能

テンプレート群	種類	ウィキテーブルコード の処理	レスポンシブ・デザイン モバイル対応	最初	段組み分け	最後
"Col"	Table			{{Col-begin}} または{{Col-begin-small}}	{{Col-break}} {{Col-2}} .. {{Col-5}}	{{Col-end}}
"Columns"	Table			{{Columns}}	–	–
"Multicol"	Table			{{Multicol}}	{{Multicol-break}}	{{Multicol-end}}
"Col-float"	CSS float			{{Col-float}}	{{Col-float-break}}	{{Col-float-end}}
"Columns-start"	CSS float			{{Columns-start}}	{{Column}}	{{Columns-end}}
"Div col"	CSS columns			{{Div col}}	{{No col break}}（この範囲を分割させない指定）	{{Div col end}}
"Columns-list"	CSS columns			{{Columns-list}}	–	–
"Flexbox"	CSS Flexbox			{{Flexbox}}	{{Flex-item}} {{Flex-item start}} .. {{Flex-item end}}	–
"Flexbox start"	CSS Flexbox			{{Flexbox start}}		{{Flexbox end}}

ウィキマークアップ(Help:ページの編集#マークアップ) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。

Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

外部リンク

• フレックスボックスの基本概念 - MDN Web Docs
• Flexible Box Layout Module - Can I Use