Template:Flex-item start
複数の要素をまとめて、{{Flexbox}}
や{{Flexbox start}}
& {{Flexbox end}}
の子要素として扱うために使用するテンプレートです。かならず{{Flex-item end}}
とペアで使用してください。
使い方編集
コンテンツの複雑さなどに応じて、
といった組み合わせを使い分けてください。
引数編集
第1引数編集
{{Flex-item}}
の第1引数には、ひとまとまりのFlex itemとして扱うコンテンツを指定します。表組みを含むなどの理由により適切に表示されない場合は、{{Flex-item start}}
と{{Flex-item end}}
でコンテンツを挟む方式を採用してください。
以下は、{{Flex-item}}
・{{Flex-item start}}
に共通する引数になります。
basis編集
CSSのflex-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-content
やmax-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}}などと組み合わせて、{{flex-item end}}とペアで使うテンプレートです。
引数 | 説明 | 型 | 状態 | |
---|---|---|---|---|
基本サイズ | basis | CSSのflex-basisプロパティ。親の{{Flexbox}}に |wrap=nowrap が指定されていない場合、最小サイズに近い働きとなる。
| 文字列 | 推奨 |
伸長係数 | grow | CSSのflex-growプロパティ。
| 数値 | 省略可能 |
縮小係数 | shrink | CSSのflex-shrinkプロパティ。
| 数値 | 省略可能 |
最大幅 | max-width | 要素の最大幅。主に要素内の余白の発生を抑えるために用いる。
| 文字列 | 推奨 |
IE用右マージン | margin-right-ie | Flexboxの要素間の空白(gap)指定に対応していないInternet ExplorerやAndroid 4.4のための右マージン指定
| 文字列 | 推奨 |
IE用下マージン | margin-bottom-ie | Flexboxの要素間の空白(gap)指定に対応していないInternet ExplorerのAndroid 4.4ための下マージン指定
| 文字列 | 省略可能 |
style | style | 任意のCSSプロパティ
| 文字列 | 省略可能 |
注釈編集
- ^ 詳細はMDN Web Docsのflex-basisを参照。
- ^ 詳細はMDN Web Docsのflex-growを参照。
- ^ 詳細はMDN Web Docsのflex-shrinkを参照。
- ^ いずれもIEなどのレガシー・ブラウザは非対応。
- ^ a b メディアウィキの互換性(2021年3月時点)がグレードC以上のブラウザのうちInternet Explorer 10および11、Android 4.3 - 4.4.4、Firefox 27 - 62、Opera 18 - 72。Can I Useのgap property for Flexboxを参照。
- ^
margin-inline
に対応しているブラウザ。Can I UseのCSS property: margin-inlineを参照。メディアウィキの互換性(2021年3月時点)がグレードC以上のブラウザのうちFirefox 63 - 65では、gap
とmargin-right
の両方が反映されます。 - ^
margin-block-end
に対応しているブラウザ。Can I UseのCSS property: margin-block-endを参照。
関連項目編集
{{Flex-item end}}
{{Flex-item}}
{{Flexbox}}
{{Flexbox start}}
、{{Flexbox end}}