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

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

CSSflex-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-contentmax-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 Docsflex-basisを参照。
  2. ^ 詳細はMDN Web Docsflex-growを参照。
  3. ^ 詳細はMDN Web Docsflex-shrinkを参照。
  4. ^ いずれもIEなどのレガシー・ブラウザは非対応。
  5. ^ a b メディアウィキの互換性(2021年3月時点)がグレードC以上のブラウザのうちInternet Explorer 10および11Android 4.3 - 4.4.4Firefox 27 - 62Opera 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では、gapmargin-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}}
dagger ウィキマークアップ(Help:ページの編集#マークアップ英語版) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。
double-dagger Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

外部リンク 編集

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