コンテンツにスキップ

Template:Flex-item

リンクを追加
テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]
ショートカット:

複数の要素をまとめて、{{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プロパティ[注 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 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}}などと組み合わせて使うテンプレートです。

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

パラメーター説明型状態
11

子要素としてまとめるコンテンツ

内容必須
基本サイズ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
文字列省略可能
stylestyle

任意のCSSプロパティ

例
border: 1px dashed #888;
文字列省略可能

注釈

[編集]
  1. ^ 詳細はMDN Web Docsのflex-basisを参照。
  2. ^ 詳細はMDN Web Docsのflex-growを参照。
  3. ^ 詳細はMDN Web Docsのflex-shrinkを参照。
  4. ^ いずれもIEなどのレガシー・ブラウザは非対応。
  5. ^ 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を参照。
  6. ^ margin-inlineに対応しているブラウザ。Can I UseのCSS property: margin-inlineを参照。メディアウィキの互換性（2021年3月時点）がグレードC以上のブラウザのうちFirefox 63 - 65では、gapとmargin-rightの両方が反映されます。
  7. ^ margin-block-endに対応しているブラウザ。Can I UseのCSS property: margin-block-endを参照。

関連項目

[編集]

段組みテンプレート

[編集]
Yes ：可能 No ：不可能
テンプレート群 種類
ウィキテーブルコード
の処理dagger
 レスポンシブ・デザイン
モバイル対応 		最初 段組み分け 最後
"Col" Table Yes No {{Col-begin}}
または{{Col-begin-small}} 		{{Col-break}}
{{Col-2}} .. {{Col-5}} 		{{Col-end}}
"Columns" Table No No {{Columns}} – –
"Multicol" Table Yes Yes {{Multicol}} {{Multicol-break}} {{Multicol-end}}
"Col-float" CSS float Yes Yes {{Col-float}} {{Col-float-break}} {{Col-float-end}}
"Columns-start" CSS float Yes Yes {{Columns-start}} {{Column}} {{Columns-end}}
"Div col" CSS columns Yes Yes {{Div col}} {{No col break}}（引数の内容を分割させない指定） {{Div col end}}
"Columns-list" CSS columns No Yes {{Columns-list}} – –
"Flexbox"double-dagger CSS Flexbox（英語版） No Yes {{Flexbox}} {{Flex-item}}
{{Flex-item start}} .. {{Flex-item end}} 		–
"Flexbox start"double-dagger CSS Flexbox Yes Yes {{Flexbox start}} {{Flexbox end}}
"Flex columns"double-dagger CSS Flexbox No Yes {{Flex columns}} – –
dagger ウィキマークアップ(Help:ページの編集#マークアップ（英語版）) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。
double-dagger Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

外部リンク

[編集]

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

この解説は、Template:Flex-item/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (編集 | 差分)とテストケース (編集)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。
「https://ja.wikipedia.org/w/index.php?title=Template:Flex-item&oldid=87504897」から取得