Template:Flex/start

To be used in conjunction with Template:Flex/end 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.

Template parameters

This template prefers block formatting of parameters.

Parameter		Description	Type	Status
content	content 1	The content to put in the flex container. Can also be passed as the first positional (nameless) parameter.	Content	suggested

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 Template:Flex/start/doc. (edit | history)