Template:Flex-item
複数の要素をまとめて、{{Flexbox}}や{{Flexbox start}} & {{Flexbox 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-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]ではこの引数の値は無視されます。
使用例
[編集]出力例の破線の枠線は、実際には出力されません。
- 入力例
- 出力例（幅が広い場合）
- 出力例（幅が狭い場合）
テンプレートデータ
[編集]{{Flexbox}}などと組み合わせて使うテンプレートです。
| パラメーター | 説明 | 型 | 状態 | |
|---|---|---|---|---|
| 1 | 1 | 子要素としてまとめるコンテンツ | 内容 | 必須 |
| 基本サイズ | 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を参照。
関連項目
[編集]段組みテンプレート
[編集] | これらのテンプレートに互換性はありません。例として、{{Multicol}}に{{Multicol-end}}ではなく{{col-end}}を併用すると、HTMLの "div" (division) が閉じられず、以降の表示に不具合が発生します。 |
|
：可能 | 
|
：不可能 |
| テンプレート群 | 種類 | ウィキテーブルコード
の処理  |
レスポンシブ・デザイン モバイル対応 |
最初 | 段組み分け | 最後 |
|---|---|---|---|---|---|---|
| "Col" | Table |
|
|
{{Col-begin}} または{{Col-begin-small}} |
{{Col-break}} {{Col-2}} .. {{Col-5}} |
{{Col-end}} |
| "Columns" | Table |
|
|
{{Columns}} | – | – |
| "Multicol" | Table |
|
|
{{Multicol}} | {{Multicol-break}} | {{Multicol-end}} |
| "Col-float" | CSS float |
|
|
{{Col-float}} | {{Col-float-break}} | {{Col-float-end}} |
| "Columns-start" | CSS float |
|
|
{{Columns-start}} | {{Column}} | {{Columns-end}} |
| "Div col" | CSS columns |
|
|
{{Div col}} | {{No col break}}（引数の内容を分割させない指定） | {{Div col end}} |
| "Columns-list" | CSS columns |
|
|
{{Columns-list}} | – | – |
"Flexbox"
|
CSS Flexbox |
|
|
{{Flexbox}} | {{Flex-item}} {{Flex-item start}} .. {{Flex-item end}} |
– |
| "Flexbox start"
|
CSS Flexbox |
|
|
{{Flexbox start}} | {{Flexbox end}} |
ウィキマークアップ(Help:ページの編集#マークアップ) ({|||||-|}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>,<tr>...</tr>など) を使用する必要があります。
Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。