Flex

Documentation

Usage

{{flex |
| nowrap  = <!-- set only if you want to disable wrapping -->
| widths  =
| content =
| gap     =
| justify =
| align   =
}}

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
Widths	`widths`	The width to give elements inside the container. Works best if all elements are of similar width. Default 200px	String	suggested
Nowrap	`nowrap`	Set to 1 to disable wrapping. Example 1	Number	optional
Content	`content`	The content to put in the flex container.	Content	required
Gap	`gap`	The gap between elements. Default 2rem Example 2rem	String	optional
Justify	`justify`	left, right, center, or another valid value for the justify-content property Default left Example center	String	optional
Align	`align`	top, center, baseline, bottom or another valid value for the align-content property. Default top	String	optional

Example

{{flex
| widths = 150px
| content =
<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>
}}

there's a box here

and another!!

all spread out or something

who knows really