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

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

2022-07-26T20:53:08Z

2001:268:C0A3:CD7B:404D:E56F:6D4B:3F6E: /* 関連項目 */ Template:Column-generating template families

{{documentation subpage|種類=[[ヘルプ:テンプレート|テンプレート]]}}
{{tsh|)Flxi|)flxi}}
複数の[[HTML要素|要素]]をまとめて、{{tlx|Flexbox}}や{{tlx|Flexbox start}} & {{tlx|Flexbox end}}の子要素として扱うために使用するテンプレートです。詳細は本テンプレートとペアで使用する{{tlx|Flex-item start}}の解説を参照してください。

== テンプレートデータ ==
{{TemplateData header}}
<templatedata>
{
"description": "{{Flexbox}}などと組み合わせて、{{Flex-item start}}とペアで使うテンプレートです。",
"params": {}
}
</templatedata>

== 関連項目 ==
{{Column-generating template families}}

<includeonly>{{sandbox other||
[[Category:レイアウト用テンプレート]]
}}</includeonly>

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

2022-07-26T20:52:58Z

2001:268:C0A3:CD7B:404D:E56F:6D4B:3F6E: /* 関連項目 */ Template:Column-generating template families

{{documentation subpage|種類=[[ヘルプ:テンプレート|テンプレート]]}}
{{tsh|Flxi(}}
複数の[[HTML要素|要素]]をまとめて、{{tlx|Flexbox}}や{{tlx|Flexbox start}} & {{tlx|Flexbox end}}の子要素として扱うために使用するテンプレートです。かならず{{tlx|Flex-item end}}とペアで使用してください。

{{Flex-item/doc/general}}
== テンプレートデータ ==
{{TemplateData header}}
<templatedata>
{
"description": "{{Flexbox}}などと組み合わせて、{{flex-item end}}とペアで使うテンプレートです。",
"params": {
"basis": {
"label": "基本サイズ",
"description": "CSSのflex-basisプロパティ。親の{{Flexbox}}に |wrap=nowrap が指定されていない場合、最小サイズに近い働きとなる。",
"type": "string",
"suggested": true,
"default": "30em",
"example": "auto"
},
"grow": {
"label": "伸長係数",
"description": "CSSのflex-growプロパティ。",
"type": "number",
"default": "1"
},
"shrink": {
"label": "縮小係数",
"description": "CSSのflex-shrinkプロパティ。",
"type": "number",
"default": "0"
},
"max-width": {
"label": "最大幅",
"description": "要素の最大幅。主に要素内の余白の発生を抑えるために用いる。",
"type": "string",
"suggested": true,
"autovalue": "fit-content",
"suggestedvalues": [
"max-content",
"fit-content",
"min-content"
]
},
"margin-right-ie": {
"label": "IE用右マージン",
"description": "Flexboxの要素間の空白（gap）指定に対応していないInternet ExplorerやAndroid 4.4のための右マージン指定",
"type": "string",
"suggested": true,
"default": "1em"
},
"margin-bottom-ie": {
"label": "IE用下マージン",
"description": "Flexboxの要素間の空白（gap）指定に対応していないInternet ExplorerのAndroid 4.4ための下マージン指定",
"type": "string",
"default": "0"
},
"style": {
"label": "style",
"description": "任意のCSSプロパティ",
"type": "string",
"required": false,
"example": "border: 1px dashed #888;"
}
}
}
</templatedata>

== 注釈 ==
{{notelist2}}

== 関連項目 ==
{{Column-generating template families}}

== 外部リンク ==
[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax 主軸に沿ったフレックスアイテムの比率の制御] - [[MDN Web Docs]]
<includeonly>{{sandbox other||
[[Category:レイアウト用テンプレート]]
}}</includeonly>

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

2022-07-26T20:52:47Z

2001:268:C0A3:CD7B:404D:E56F:6D4B:3F6E: /* 関連項目 */ Template:Column-generating template families

{{documentation subpage|種類=[[ヘルプ:テンプレート|テンプレート]]}}
{{tsh|Flxi}}
複数の[[HTML要素|要素]]をまとめて、{{tlx|Flexbox}}や{{tlx|Flexbox start}} & {{tlx|Flexbox end}}の子要素として扱うために使用するテンプレートです。

{{Flex-item/doc/general}}
== テンプレートデータ ==
{{TemplateData header}}
<templatedata>
{
"description": "{{Flexbox}}などと組み合わせて使うテンプレートです。",
"params": {
"1": {
"label": "1",
"description": "子要素としてまとめるコンテンツ",
"type": "content",
"required": true
},
"basis": {
"label": "基本サイズ",
"description": "CSSのflex-basisプロパティ。親の{{Flexbox}}に |wrap=nowrap が指定されていない場合、最小サイズに近い働きとなる。",
"type": "string",
"suggested": true,
"default": "30em",
"example": "auto"
},
"grow": {
"label": "伸長係数",
"description": "CSSのflex-growプロパティ。",
"type": "number",
"default": "1"
},
"shrink": {
"label": "縮小係数",
"description": "CSSのflex-shrinkプロパティ。",
"type": "number",
"default": "0"
},
"max-width": {
"label": "最大幅",
"description": "要素の最大幅。主に要素内の余白の発生を抑えるために用いる。",
"type": "string",
"suggested": true,
"autovalue": "fit-content",
"suggestedvalues": [
"max-content",
"fit-content",
"min-content"
]
},
"margin-right-ie": {
"label": "IE用右マージン",
"description": "Flexboxの要素間の空白（gap）指定に対応していないInternet ExplorerやAndroid 4.4のための右マージン指定",
"type": "string",
"suggested": true,
"default": "1em"
},
"margin-bottom-ie": {
"label": "IE用下マージン",
"description": "Flexboxの要素間の空白（gap）指定に対応していないInternet ExplorerのAndroid 4.4ための下マージン指定",
"type": "string",
"default": "0"
},
"style": {
"label": "style",
"description": "任意のCSSプロパティ",
"type": "string",
"required": false,
"example": "border: 1px dashed #888;"
}
}
}
</templatedata>

== 注釈 ==
{{notelist2}}

== 関連項目 ==
{{Column-generating template families}}

== 外部リンク ==
[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax 主軸に沿ったフレックスアイテムの比率の制御] - [[MDN Web Docs]]
<includeonly>{{sandbox other||
[[Category:レイアウト用テンプレート]]
}}</includeonly>

テンプレート:Flexbox end/doc

2022-07-26T20:52:31Z

2001:268:C0A3:CD7B:404D:E56F:6D4B:3F6E: /* 関連項目 */ Template:Column-generating template families

{{Documentation subpage|種類=[[Help:テンプレート|テンプレート]]}}
{{tsh|)Flx|)flx}}
[[Cascading Style Sheets|CSS]]でFlexboxを作成するためのテンプレートです。詳細はペアで使用する{{tlx|Flexbox start}}の説明を参照してください。

== テンプレートデータ ==
{{TemplateData header}}
<templatedata>
{
"description": "{{Flexbox start}}とペアで使用してCSSでFlexboxを作るためのテンプレートです。",
"params": {}
}
</templatedata>

== 関連項目 ==
{{Column-generating template families}}

<includeonly>{{sandbox other||

[[Category:レイアウト用テンプレート]]

}}</includeonly>

テンプレート:Flexbox start/doc

2022-07-26T20:52:12Z

2001:268:C0A3:CD7B:404D:E56F:6D4B:3F6E: /* 関連項目 */ Template:Column-generating template families

{{documentation subpage|種類=[[ヘルプ:テンプレート|テンプレート]]}}
{{Lua|モジュール:Flexbox}}
<div style="float:right; clear:right;">{{tsh|Flx(}}</div>
{{+float}}
[[Cascading Style Sheets|CSS]]でFlexboxを作成するためのテンプレートです。
__TOC__
== 使い方 ==
<syntaxhighlight lang="text">
{{Flexbox start}}
...
...
{{Flexbox end}}
</syntaxhighlight>
のように、かならず{{tlx|Flexbox end}}とペアで使用します。
{{Flexbox/doc/general}}

== テンプレートデータ ==
{{TemplateData header}}
<templatedata>
{
"description": "CSSでFlexboxを作るためのテンプレートです。{{Flexbox end}}とペアで使用します。directionにrow以外を指定した場合は、各引数の説明における上下・左右・行を適宜読み替えてください。",
"params": {
"direction": {
"label": "flex-direction",
"description": "要素の並び方。rowは横、columnは縦",
"type": "string",
"required": false,
"default": "row",
"suggestedvalues": [
"row",
"row-reverse",
"column",
"column-reverse"
]
},
"wrap": {
"label": "flex-wrap",
"description": "画面幅に応じて改行するか",
"type": "string",
"required": false,
"default": "wrap",
"suggestedvalues": [
"wrap",
"wrap-reverse",
"nowrap"
]
},
"justify-content": {
"label": "justify-content",
"description": "要素の左右方向の余白の制御",
"type": "string",
"required": false,
"default": "flex-start",
"suggestedvalues": [
"flex-start",
"flex-end",
"center",
"space-between",
"space-around",
"start",
"end",
"space-evenly"
]
},
"align-items": {
"label": "align-items",
"description": "同じ行の要素の上下位置制御",
"type": "string",
"required": false,
"default": "stretch",
"suggestedvalues": [
"stretch",
"flex-start",
"flex-end",
"center",
"baseline"
]
},
"align-content": {
"label": "align-content",
"description": "要素の上下方向の余白の制御",
"type": "string",
"required": false,
"default": "normal",
"suggestedvalues": [
"stretch",
"flex-start",
"flex-end",
"center",
"space-between",
"space-around",
"start",
"end",
"space-evenly"
]
},
"gap": {
"label": "gap",
"description": "要素間の最小余白（2つ指定する場合は縦横の順）",
"type": "string",
"required": false,
"default": "1em",
"example": "2em 0.5em "
},
"style": {
"label": "style",
"description": "任意のCSSプロパティ",
"type": "string",
"required": false,
"example": "border: 1px dashed #888;"
},
"force-row-legacy": {
"label": "レガシー・ブラウザで横並びを有効化",
"description": "wrapに対応していないブラウザでも横並びを有効化する",
"type": "boolean",
"autovalue": "0"
}
}
}
</templatedata>

== 注釈 ==
{{notelist2|25em}}

== 関連項目 ==
{{Column-generating template families}}

== 外部リンク ==
* [https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox フレックスボックスの基本概念] - [[MDN Web Docs]]
* [https://caniuse.com/flexbox|CSS Flexible Box Layout Module] - Can I Use

<includeonly>{{sandbox other||
[[Category:レイアウト用テンプレート]]
[[Category:クロスブラウザ互換性テンプレート]]
}}</includeonly>