テンプレート:Flex-item/doc/general

2022-07-29T22:48:58Z

2001:268:C0A3:6802:1564:E588:C090:A97: /* max-with */

<noinclude>{{documentation subpage|種類=[[ヘルプ:テンプレート|テンプレート]]}}</noinclude>
== 使い方 ==
コンテンツの複雑さなどに応じて、
<syntaxhighlight lang="handlebars">
{{Flexbox|
{{Flex-item|...}}
{{Flex-item|...}}
}}
</syntaxhighlight>
<syntaxhighlight lang="handlebars">
{{Flexbox start}}
{{Flex-item|...}}
{{Flex-item|...}}
{{Flexbox end}}
</syntaxhighlight>
<syntaxhighlight lang="handlebars">
{{Flexbox|
{{Flex-item start}}
...
{{Flex-item end}}
{{Flex-item|...}}
}}
</syntaxhighlight>
<syntaxhighlight lang="handlebars">
{{Flexbox start}}
{{Flex-item start}}
...
{{Flex-item end}}
{{Flex-item|...}}
[[File:...]]
{{Flexbox end}}
</syntaxhighlight>
といった組み合わせを使い分けてください。

== 引数 ==
=== 第1引数 ===
{{tlx|Flex-item}}の第1引数には、ひとまとまりのFlex itemとして扱うコンテンツを指定します。表組みを含むなどの理由により適切に表示されない場合は、{{tlx|Flex-item start}}と{{tlx|Flex-item end}}でコンテンツを挟む方式を採用してください。

以下は、{{tlc|Flex-item}}・{{tlc|Flex-item start}}に共通する引数になります。

=== basis ===
[[Cascading Style Sheets|CSS]]の{{code|flex-basis}}プロパティ{{efn2|詳細は[[MDN Web Docs]]の[https://developer.mozilla.org/ja/docs/Web/CSS/flex-basis flex-basis]を参照。}}を指定する引数。親の{{tlx|Flexbox}}や{{tlx|Flexbox start}}に {{para|wrap|nowrap}} が指定されている場合以外は、最小サイズに近い働きとなります。既定値はCSSの既定値（{{code|auto}}）とは異なり<code>30[[Em (単位)|em]]</code>です。

=== grow ===
CSSの{{code|flex-grow}}プロパティ{{efn2|詳細は[[MDN Web Docs]]の[https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow flex-grow]を参照。}}（伸長係数）を指定する引数。既定値はCSSの既定値（{{code|0}}）とは異なり{{code|1}}です。

=== shrink ===
CSSの{{code|flex-shrink}}プロパティ{{efn2|詳細は[[MDN Web Docs]]の[https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink flex-shrink]を参照。}}（縮小係数）を指定する引数。既定値は{{code|0}}です。

=== max-width ===
要素の最大幅を指定するプロパティ。{{code|fit-content}}や{{code|max-content}}{{efn2|いずれもIEなどのレガシー・ブラウザは非対応。}}を指定すれば、要素の右側などの余白をなくすことができます。

=== margin-right-ie ===
{{tlx|Flexbox}}・{{tlx|Flexbox start}}の{{para|gap}}引数に対応していないブラウザ{{efn2|name=gap|[[:mw:Compatibility/ja|メディアウィキの互換性]]（2021年3月時点）がグレードC以上のブラウザのうち[[Internet Explorer 10]]および[[Internet Explorer 11|11]]、[[Android 4.3]] - [[Android 4.4|4.4.4]]、[[Firefox 27]] - [[Firefox 62|62]]、[[Opera]] 18 - 72。Can I Useの[https://caniuse.com/flexbox-gap gap property for Flexbox]を参照。}}用に右側の余白を設定するための引数です。既定値は{{code|1em}}です。原則として、一番最後の要素には{{para|margin-right-ie|0}}を指定します。モダン・ブラウザ{{efn2|{{code|margin-inline}}に対応しているブラウザ。Can I Useの[https://caniuse.com/mdn-css_properties_margin-inline CSS property: margin-inline]を参照。[[:mw:Compatibility/ja|メディアウィキの互換性]]（2021年3月時点）がグレードC以上のブラウザのうち[[Firefox 63]] - [[Firefox 65|65]]では、{{code|gap}}と{{code|margin-right}}の両方が反映されます。}}ではこの引数の値は無視されます。

=== margin-bottom-ie ===
{{tlx|Flexbox}}・{{tlx|Flexbox start}}の{{para|gap}}引数に対応していないブラウザ{{efn2|name=gap}}用に下側の余白を設定するための引数です。モダン・ブラウザ{{efn2|{{code|margin-block-end}}に対応しているブラウザ。Can I Useの[https://caniuse.com/mdn-css_properties_margin-block-end CSS property: margin-block-end]を参照。}}ではこの引数の値は無視されます。

== 使用例 ==
出力例の破線の枠線は、実際には出力されません。
<dl>
<dt>入力例</dt>
<dd><syntaxhighlight lang="handlebars">
{{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}}
</syntaxhighlight></dd>
<dt>出力例（幅が広い場合）</dt>
<dd>{{flexbox start|gap=2em|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; min-width: 45em}}
{{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}}</dd>
<dt>出力例（幅が狭い場合）</dt>
<dd>{{flexbox start|gap=2em|style=border: 1px dashed #888; border-radius: 0.5em; padding: 1em; max-width: 22em}}
{{flex-item start|auto-min-width=1|width=calc(50% - 1em)}}
=== 使用例小見出し1 ===

色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|foo
|bar
|baz
|-
|foobar
|barbaz
|bazqux
|-
|foobaz
|barqux
|bazquux
|}
{{flex-item end}}

{{flex-item start|auto-min-width=1|width=calc(50% - 1em)}}
=== 使用例小見出し2 ===
いろはにほへと　ちりぬるをわかよたれそ　つねならむうゐのおくやま　けふこえてあさきゆめみし　ゑひもせすん
{| class="wikitable"
|+
!ほげ
!ふが
!ぴよ
|-
|qux
|quux
|corge
|-
|quxfoo
|quuxfoo
|corgefoo
|-
|quxbaz
|quuzbaz
|corgebaz
|}
{{flex-item end}}
{{flexbox end}}</dd>
</dl><noinclude>
==注釈==
{{notelist2|25em}}
</noinclude>

ManyoWiki - 利用者の投稿記録 [ja]

テンプレート:Flex-item/doc/general