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

複数の要素をまとめて、{{Flexbox}}{{Flexbox start}} & {{Flexbox end}}の子要素として扱うために使用するテンプレートです。


使い方編集

コンテンツの複雑さなどに応じて、

{{Flexbox|
{{Flex-item|...}}
{{Flex-item|...}}
}}
{{Flexbox start}}
{{Flex-item|...}}
{{Flex-item|...}}
{{Flexbox end}}
{{Flexbox|
{{Flex-item start}}
...
{{Flex-item end}}
{{Flex-item|...}}
}}
{{Flexbox start}}
{{Flex-item start}}
...
{{Flex-item end}}
{{Flex-item|...}}
[[File:...]]
{{Flexbox end}}

といった組み合わせを使い分けてください。

引数編集

第1引数編集

{{Flex-item}}の第1引数には、ひとまとまりのFlex itemとして扱うコンテンツを指定します。表組みを含むなどの理由により適切に表示されない場合は、{{Flex-item start}}{{Flex-item end}}でコンテンツを挟む方式を採用してください。

以下は、{{Flex-item}}{{Flex-item start}}に共通する引数になります。

basis編集

CSSflex-basisプロパティ[注 1]を指定する引数。親の{{Flexbox}}{{Flexbox start}}|wrap=nowrap が指定されている場合以外は、最小サイズに近い働きとなります。既定値はCSSの既定値(auto)とは異なり30emです。

grow編集

CSSのflex-growプロパティ[注 2](伸長係数)を指定する引数。既定値はCSSの既定値(0)とは異なり1です。

shrink編集

CSSのflex-shrinkプロパティ[注 3](縮小係数)を指定する引数。既定値は0です。

max-with編集

要素の最大幅を指定するプロパティ。fit-contentmax-content[注 4]を指定すれば、要素の右側などの余白をなくすことができます。

margin-right-ie編集

{{Flexbox}}{{Flexbox start}}|gap=引数に対応していないブラウザ[注 5]用に右側の余白を設定するための引数です。既定値は1emです。原則として、一番最後の要素には|margin-right-ie=0を指定します。モダン・ブラウザ[注 6]ではこの引数の値は無視されます。

margin-bottom-ie編集

{{Flexbox}}{{Flexbox start}}|gap=引数に対応していないブラウザ[注 5]用に下側の余白を設定するための引数です。モダン・ブラウザ[注 7]ではこの引数の値は無視されます。

使用例編集

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

入力例
{{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}}
出力例(幅が広い場合)

使用例小見出し1編集

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

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

使用例小見出し2編集

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

ほげ ふが ぴよ
qux quux corge
quxfoo quuxfoo corgefoo
quxbaz quuzbaz corgebaz
出力例(幅が狭い場合)

使用例小見出し1編集

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

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

使用例小見出し2編集

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

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

テンプレートデータ編集

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

Flex-item

{{Flexbox}}などと組み合わせて使うテンプレートです。

テンプレート引数

引数説明状態
11

子要素としてまとめるコンテンツ

内容必須
基本サイズbasis

CSSのflex-basisプロパティ。親の{{Flexbox}}に |wrap=nowrap が指定されていない場合、最小サイズに近い働きとなる。

既定
30em
auto
文字列推奨
伸長係数grow

CSSのflex-growプロパティ。

既定
1
数値省略可能
縮小係数shrink

CSSのflex-shrinkプロパティ。

既定
0
数値省略可能
最大幅max-width

要素の最大幅。主に要素内の余白の発生を抑えるために用いる。

Suggested values
max-content fit-content min-content
自動入力値
fit-content
文字列推奨
IE用右マージンmargin-right-ie

Flexboxの要素間の空白(gap)指定に対応していないInternet ExplorerやAndroid 4.4のための右マージン指定

既定
1em
文字列推奨
IE用下マージンmargin-bottom-ie

Flexboxの要素間の空白(gap)指定に対応していないInternet ExplorerのAndroid 4.4ための下マージン指定

既定
0
文字列省略可能
stylestyle

任意のCSSプロパティ

border: 1px dashed #888;
文字列省略可能

注釈編集

  1. ^ 詳細はMDN Web Docsflex-basisを参照。
  2. ^ 詳細はMDN Web Docsflex-growを参照。
  3. ^ 詳細はMDN Web Docsflex-shrinkを参照。
  4. ^ いずれもIEなどのレガシー・ブラウザは非対応。
  5. ^ a b メディアウィキの互換性(2021年3月時点)がグレードC以上のブラウザのうちInternet Explorer 10および11Android 4.3 - 4.4.4Firefox 27 - 62Opera 18 - 72。Can I Useのgap property for Flexboxを参照。
  6. ^ margin-inlineに対応しているブラウザ。Can I UseのCSS property: margin-inlineを参照。メディアウィキの互換性(2021年3月時点)がグレードC以上のブラウザのうちFirefox 63 - 65では、gapmargin-rightの両方が反映されます。
  7. ^ margin-block-endに対応しているブラウザ。Can I UseのCSS property: margin-block-endを参照。

関連項目編集

外部リンク編集

主軸に沿ったフレックスアイテムの比率の制御 - MDN Web Docs