Template:Flex-item/doc/general

使い方

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

{{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

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

grow

CSSのflex-growプロパティ（伸長係数）を指定する引数。既定値はCSSの既定値（0）とは異なり1です。

shrink

CSSのflex-shrinkプロパティ（縮小係数）を指定する引数。既定値は0です。

max-width

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

margin-right-ie

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

margin-bottom-ie

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

使用例

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

入力例

{{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