テンプレート:Flex/end

To be used in conjunction with Template:Flex/start to create flex-box containers.

Creates a flexbox layout container.

• {{Flex/start}}
• {{Flex/end}}

Usage

{{flex/start}}
some stuff
{{flex/end}}

<!-- OR (optionally allow floating or adjust vertical alignment) -->

{{flex/start | float=right | align=start | justify=center | nowrap=1 | gap=2px | style=color:red;}}
some stuff
{{flex/end}}

Details

A flexible container to dynamically align elements based on available width.

テンプレート引数

このテンプレートは、パラメーターを複数行に分けて記述することが推奨されています。

引数		説明	型	状態
content	content 1	The content to put in the flex container. Can also be passed as the first positional (nameless) parameter.	内容	推奨

Example

{{flex/start}}
<div style="border: 1px solid;">there's a box here</div>
<div style="border: 1px solid;">and another!!</div>
<div style="border: 1px solid;">all spread out or something</div>
<div style="border: 1px solid;">who knows really</div>
{{flex/end}}

there's a box here

and another!!

all spread out or something

who knows really

Floating flex containers!

{{flex/start | float=right}}
<div style="border: 1px solid;">there's a box here</div>
<div style="border: 1px solid;">and another!!</div>
<div style="border: 1px solid;">all spread out or something</div>
<div style="border: 1px solid;">who knows really</div>
{{flex/end}}

there's a box here

and another!!

all spread out or something

who knows really

The following syntax is generally considered legacy but still supported; when possible, use the /start and /end fragments, as it makes things a little nicer to edit and makes syntax highlighting less screwy.

{{flex
| content = 
<div style="border: 1px solid;">there's a box here</div>
<div style="border: 1px solid;">and another!!</div>
}}

there's a box here

and another!!

---

The above documentation is transcluded from テンプレート:Flex/end/doc. (edit | history)