テンプレート:Flexbox

    リンクを追加
    提供：ManyoWiki
    2022年1月14日 (金) 07:40時点におけるwikipedia>JuthaDDAによる版 (引数追加、レガシー・ブラウザ対応のためLuaモジュール化)
    (差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
    テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

    CSSでFlexbox（英語版）を作成するためのテンプレートです。

    使い方

    {{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を指定しない限り、横並びのフレックスボックスは強制的に無効化されます[注 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を指定しない限り、強制的に|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

    CSSでFlexboxを作るためのテンプレートです。（directionにcolumn/column-reverseを指定した場合は、各引数の説明における上下・左右・行を左右・上下・列に読み替えてください）

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

    パラメーター説明型状態
    11 content

    Flexbox内のコンテンツ

    		内容必須
    flex-directiondirection

    要素の並び方。rowは横、columnは縦

    値の候補
    row row-reverse column column-reverse
    既定
    row
    		文字列省略可能
    flex-wrapwrap

    画面幅に応じて改行するか

    値の候補
    wrap wrap-reverse nowrap
    既定
    wrap
    		文字列省略可能
    justify-contentjustify-content

    要素の左右方向の余白の制御

    値の候補
    flex-start flex-end center space-between space-around start end space-evenly
    既定
    flex-start
    		文字列省略可能
    align-itemsalign-items

    同じ行の要素の上下位置制御

    値の候補
    stretch flex-start flex-end center baseline
    既定
    stretch
    		文字列省略可能
    align-contentalign-content

    要素の上下方向の余白の制御

    値の候補
    stretch flex-start flex-end center space-between space-around start end space-evenly
    既定
    normal
    		文字列省略可能
    gapgap

    要素間の最小余白（2つ指定する場合は縦 横の順）

    既定
    1em
    例
    2em 0.5em
    		文字列省略可能
    stylestyle

    任意のCSSプロパティ

    例
    border: 1px dashed #888;
    		文字列省略可能
    レガシー・ブラウザで横並びを有効化force-row-legacy

    wrapに対応していないブラウザでも横並びを有効化する

    自動入力値
    0
    		ブール値省略可能

    注釈

    1. ↑ flex-direction（MDN Web Docs）を参照。
    2. ↑ flex-wrap（MDN Web Docs）を参照。
    3. ↑ justify-content（MDN Web Docs）を参照。
    4. ↑ align-items（MDN Web Docs）を参照。
    5. ↑ align-content（MDN Web Docs）を参照。
    6. ↑ gap（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の両方が反映されます。
    8. ↑ 8.0 8.1 |style=引数の指定されたスタイルを除き、本テンプレートを使用しない場合と同様の表示となります。
    9. ↑ 技術的には、Firefox 27が対応していない-ms-flex-flow・flex-flowでflex-direction: column;を上書きしています。

    関連項目

    段組みテンプレート

    Yes ：可能 No ：不可能
    テンプレート群 種類
    ウィキテーブルコード
    の処理dagger
    		 レスポンシブ・デザイン
    モバイル対応     		最初 段組み分け 最後
    "Col" Table Yes No {{Col-begin}}
    または{{Col-begin-small}}     		{{Col-break}}
    {{Col-2}} .. {{Col-5}}     		{{Col-end}}
    "Columns" Table No No {{Columns}} – –
    "Multicol" Table Yes Yes {{Multicol}} {{Multicol-break}} {{Multicol-end}}
    "Col-float" CSS float Yes Yes {{Col-float}} {{Col-float-break}} {{Col-float-end}}
    "Columns-start" CSS float Yes Yes {{Columns-start}} {{Column}} {{Columns-end}}
    "Div col" CSS columns Yes Yes {{Div col}} {{No col break}}（この範囲を分割させない指定） {{Div col end}}
    "Columns-list" CSS columns No Yes {{Columns-list}} – –
    "Flexbox"double-dagger CSS Flexbox（英語版） No Yes {{Flexbox}} {{Flex-item}}
    {{Flex-item start}} .. {{Flex-item end}}     		–
    "Flexbox start"double-dagger CSS Flexbox Yes Yes {{Flexbox start}} {{Flexbox end}}
    dagger ウィキマークアップ(Help:ページの編集#マークアップ（英語版）) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。
    double-dagger Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

    外部リンク

    この解説は、テンプレート:Flexbox/docから呼び出されています。 (編集 | 履歴)
    編集者は、このテンプレートをサンドボックス (編集 | 差分)とテストケース (編集)で試すことができます。（解説）
    /docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。
    「http://manyo.wpx.jp/w/index.php?title=テンプレート:Flexbox&oldid=1395」から取得