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

2023-08-13T08:48:02Z

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

← 古い版

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

2022年7月27日 (水) 09:16にwikipedia>Vcvfou698069による

2022-07-27T09:16:34Z

新規ページ

{{documentation subpage|種類=[[ヘルプ:テンプレート|テンプレート]]}}
{{Lua|モジュール:Flexbox}}
<div style="float:right; clear:right;">{{tsh|Flx}}</div>
{{+float}}
[[Cascading Style Sheets|CSS]]で{{仮リンク|Flexbox|en|CSS Flexible Box Layout}}を作成するためのテンプレートです。

__TOC__
== 使い方 ==
{{Flexbox/doc/general}}

== テンプレートデータ ==
{{TemplateData header}}
<templatedata>
{
"description": "CSSでFlexboxを作るためのテンプレートです。（directionにcolumn/column-reverseを指定した場合は、各引数の説明における上下・左右・行を左右・上下・列に読み替えてください）",
"params": {
"1": {
"label": "1",
"description": "Flexbox内のコンテンツ",
"type": "content",
"required": true,
"aliases": [
"content"
]
},
"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/doc - 版の履歴

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

2022年7月27日 (水) 09:16にwikipedia>Vcvfou698069による

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