Template:Flexbox/doc/general
{{Flexbox}}の第1引数（|content=引数も利用可）には、表示するコンテンツを入力します。表組みを含むなどの理由により適切に表示されない場合は、{{Flexbox start}}と{{Flexbox end}}でコンテンツを挟む方式を採用してください。
コンテンツ内の複数の要素をまとめてひとつの子要素として扱う場合には、{{flex-item}}、もしくは{{flex-item start}}と{{flex-item end}}のペアを使用してください。
使用例（基本）[編集]
出力例の破線の枠線は、実際には出力されません。
- 入力例A-2
- 出力例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
- 出力例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
引数[編集]
以下は、{{Flexbox}}・{{Flexbox start}}に共通する引数になります。また各出力例では、分かりやすいように、入力例で示す引数指定に加えて|style=border: 1px dashed #888;の指定を追加しておこなっています。
direction[編集]
CSSのflex-direction[注 1]を指定します。
既定値のrowでは、各要素は横並びになります。
- 入力例1-1
- 出力例1-1
|direction=columnを指定すると、各要素は縦並びになります。
- 入力例1-2
- 出力例1-2
|direction=row-reverseや|direction=column-reverseを指定すると、並び順が逆になります。
- 入力例1-3
- 出力例1-3
- 入力例1-4
- 出力例1-4
|direction=row以外を指定する場合は、以下の各引数の説明における上下・左右・行などを適宜、左右・上下・列などと読み換えてください。
wrap[編集]
 | nowrapを指定した場合、親要素や画面からはみ出す可能性が高まります。本テンプレートや親要素の指定によっては、はみ出した要素が見えなくなったり、他の要素の上にかぶさってしまったりする場合もあるため、指定には注意が必要です。 |
CSSのflex-wrap[注 2]を指定します。CSSとは異なり、|wrap=nowrapではなく|wrap=wrapが規定値です。
既定値のwrapでは、画面（ないし親要素や本テンプレート本体）の幅に応じて要素が改行されます。
- 入力例2-1
- 出力例2-1
wrap-reverseを指定すると、改行される方向が上下逆になります。
- 入力例2-2
- 出力例2-2
nowrapを指定すると、改行されなくなります。本節冒頭の注意書きも参照してください。
- 入力例2-3
- 出力例2-3
force-row-legacy[編集]
後述のとおり、複数行のフレックスボックスに対応していない古いブラウザでは、横並びのフレックスボックスを無効化するように本テンプレートは設定されています。これらのブラウザでも横並びのフレックスボックスを有効化する場合には、|force-row-legacy=1を指定してください。
justify-content[編集]
CSSのjustify-content[注 3]を指定します。
既定値のflex-startでは、各要素は左寄りに配置されます。startを指定した場合も基本的には同じです。
- 入力例3-1
- 出力例3-1
flex-endを指定すると、各要素は右寄りに配置されます。endを指定した場合も基本的には同じです。
- 入力例3-2
- 出力例3-2
centerを指定すると、各要素は中央に配置されます。
- 入力例3-3
- 出力例3-3
space-betweenを指定すると、各要素は間に均等な空白を開けて配置されます。
- 入力例3-4
- 出力例3-4
space-aroundを指定すると、各要素の間だけでなく左右にも空白ができます。左右の空白は、各要素間の空白よりも狭くなります。
- 入力例3-5
- 出力例3-5
space-evenlyを指定した場合は、左右の空白も要素間の空白と同じ大きさになります。
- 入力例3-5
- 出力例3-5
align-items[編集]
CSSのalign-items[注 4]を指定します。
既定値のstretchでは、可変高の要素は行内で最も高さが大きい要素と同じ高さになり、それ以下に固定高の要素は上寄りに配置されます。
- 入力例4-1
- 出力例4-1
flex-startを指定すると、各要素は上寄りに配置されます。startを指定した場合も基本的には同じです。
- 入力例4-2
- 出力例4-2
- 入力例4-3
- 出力例4-3
- 入力例4-4
- 出力例4-4
- 入力例4-4
- 出力例4-4
- hogefugapiyo
- 入力例6-1
- 出力例6-1
- 入力例6-2
- 出力例6-2
- 出力例C-1
ほげ ふが ぴよ foo bar baz foobar barbaz bazqux foobaz barqux bazquux ほげ ふが ぴよ qux quux corge - 出力例C-2
ほげ ふが ぴよ foo bar baz foobar barbaz bazqux foobaz barqux bazquux ほげ ふが ぴよ qux quux corge - ^ 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;を上書きしています。
flex-endを指定すると、各要素は下寄りに配置されます。endを指定した場合も基本的には同じです。
centerを指定すると、各要素は縦中央寄りに配置されます。
baselineを指定すると、各要素の中の文字の縦位置が揃うような配置になります。
align-content[編集]
![[icon]](/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Wiki_letter_w_cropped.svg){kind=small} | この節の加筆が望まれています。 |
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つの値を指定すると、縦横に同じ余白が設定されます。
半角スペースを挟んで2つの値を指定した場合、1つ目が縦方向、2つ目が横方向の余白になります。
style[編集]
| この引数によるスタイル指定は、環境によっては閲覧に不都合を生じさせる場合があるため、慎重に行うようにしてください。たとえばwidthの値によっては、一部環境で親要素をはみ出した内容が表示されなくなる虞があります。 |
|style=には任意のCSSプロパティを指定することができます。
たとえば、{{Multiple image}}など一部の要素では、親要素の幅に収まる場合でも要素が改行してしまう場合があります。このような場合には、|style=width: 100%;を指定することを検討してください。
使用例（応用）[編集]
表などで高さが異なる場合、既定のalign-items: stretch;では、
のように一方の表が間延びしてしまうことがあります。このような場合|align-items=flex-startと指定すれば、
それぞれ異なる高さで表示されるようになります。
ブラウザのサポート状況[編集]
| Internet Explorerには、フレックスボックス関連の複数のバグがあるため、プロパティが対応している場合でも、Internet Explorer 11での閲覧確認を実施することが推奨されます。 |
メディアウィキの互換性（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を指定した場合と同じ表示となります。