Hisato Shima: 1版をインポートしました

2023-08-13T08:48:07Z

1版をインポートしました

← 古い版

2023年8月13日 (日) 17:48時点における版

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

2022-07-26T20:52:12Z

新規ページ

{{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>

テンプレート:Flexbox start/doc - 版の履歴

Hisato Shima: 1版 をインポートしました

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

Hisato Shima: 1版をインポートしました