Template:Flexbox start/sandbox

これはTemplate:Flexbox start (差分)のテンプレート・サンドボックスページです。
対応するテストケース・サブページもご確認ください。

テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

Luaモジュールを使用しています:

モジュール:Flexbox

ショートカット:

{{Flx(}}

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^{[注 1]}を指定します。

既定値の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^{[注 2]}を指定します。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^{[注 3]}を指定します。

既定値の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^{[注 4]}を指定します。

既定値の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^{[注 5]}を指定します。

gap

CSSのgap^{[注 6]}（要素間の最小余白）を指定します。既定値は0 1emです。

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

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を指定しない限り、横並びのフレックスボックスは強制的に無効化されます^{[注 8]}。Internet Explorer 11およびAndroid 4.4はgapプロパティに対応していません。Internet Explorer11は、|justify-content=space-evenly・|align-content=space-evenlyにも対応しておらず、いずれもspace-aroundを指定した場合と同じ表示となります。

グレードCのブラウザのうち、Internet Explorer 9はFlexbox全般に対応していません^{[注 8]}。Firefox 27はflex-wrapに対応しておらず、閲覧に支障をきたす表示となる虞があるため、|force-row-legacy=1を指定しない限り、強制的に|direction=columnを指定した場合と同様の表示となるように設定されています^{[注 9]}。また、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`	ブール値	省略可能

注釈

^ flex-direction（MDN Web Docs）を参照。
^ flex-wrap（MDN Web Docs）を参照。
^ justify-content（MDN Web Docs）を参照。
^ align-items（MDN Web Docs）を参照。
^ align-content（MDN Web Docs）を参照。
^ gap（MDN Web Docs）を参照。
^ その他のメディアウィキの互換性（2021年3月時点）がグレードC以上のブラウザはのうち、Firefox 63 - 65以外はすべてmargin-inlineに対応している（CSS property: margin-inline〈Can I Use〉参照）ため、margin-rightの指定を上書きすることができます。Firefox 63 - 65では、gapとmargin-rightの両方が反映されます。
^ ^a ^b |style=引数の指定されたスタイルを除き、本テンプレートを使用しない場合と同様の表示となります。
^ 技術的には、Firefox 27が対応していない-ms-flex-flow・flex-flowでflex-direction: column;を上書きしています。

外部リンク

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

この解説は、Template:Flexbox start/docから呼び出されています。
編集者は、このテンプレートをサンドボックスとテストケースで試すことができます。（解説）
/docのサブページにカテゴリを追加してください。このテンプレートのサブページ一覧。

[1] x-direction（MDN Web Docs）を参照。

[2] x-wrap（MDN Web Docs）を参照。

[3] ustify-content（MDN Web Docs）を参照。

[4] -items（MDN Web Docs）を参照。

[5] -content（MDN Web Docs）を参照。

[6] （MDN Web Docs）を参照。

[7] その他のメディアウィキの互換性（2021年3月時点）がグレードC以上のブラウザはのうち、Firefox 63 - 65以外はすべてmargin-inlineに対応している（CSS property: margin-inline〈Can I Use〉参照）ため、margin-rightの指定を上書きすることができます。Firefox 63 - 65では、gapとmargin-rightの両方が反映されます。

[non-flex-8] |style=引数の指定されたスタイルを除き、本テンプレートを使用しない場合と同様の表示となります。

[9] 技術的には、Firefox 27が対応していない-ms-flex-flow・flex-flowでflex-direction: column;を上書きしています。

[注 1]

[注 2]

[注 3]

[注 4]

[注 5]

[注 6]

[注 7]

[注 8]

[注 9]

テンプレート群	種類	最初	段組み分け	最後
"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}}	{{Flex-item}} {{Flex-item start}} .. {{Flex-item end}}	{{Flexbox end}}