Template:Flex-item/sandbox

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

複数の要素をまとめて、{{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

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

テンプレートデータ

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

Flex-item

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

テンプレートパラメーター[テンプレートデータを編集]

パラメーター		説明	型	状態
1	1	子要素としてまとめるコンテンツ	内容	必須
基本サイズ	basis	CSSのflex-basisプロパティ。親の{{Flexbox}}に |wrap=nowrap が指定されていない場合、最小サイズに近い働きとなる。 既定 30em 例 auto	文字列	推奨
伸長係数	grow	CSSのflex-growプロパティ。 既定 1	数値	省略可能
縮小係数	shrink	CSSのflex-shrinkプロパティ。 既定 0	数値	省略可能
最大幅	max-width	要素の最大幅。主に要素内の余白の発生を抑えるために用いる。 値の候補 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	文字列	省略可能
style	style	任意のCSSプロパティ 例 border: 1px dashed #888;	文字列	省略可能

注釈

関連項目

段組みテンプレート

：可能

：不可能

テンプレート群	種類	ウィキテーブルコード の処理	レスポンシブ・デザイン モバイル対応	最初	段組み分け	最後
"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を使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

外部リンク

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

この解説は、Template:Flex-item/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (編集 | 差分)とテストケース (編集)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。