Template:Flex-item/doc/general
使い方[編集]
コンテンツの複雑さなどに応じて、
といった組み合わせを使い分けてください。
引数[編集]
第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-width[編集]
要素の最大幅を指定するプロパティ。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]ではこの引数の値は無視されます。
使用例[編集]
出力例の破線の枠線は、実際には出力されません。
- 入力例
- 出力例（幅が広い場合）
- 出力例（幅が狭い場合）
注釈[編集]
- ^ 詳細は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を参照。