Template:Flexbox

Template documentation
View or edit this documentation. (About template documentation) Note Portions of the template sample may not be visible without values provided.

Correct placement, indicated by the green energy bolt icon on the extender

Incorrect placement, indicated by the red error icon

A template adaptation of the CSS flexbox. Best guide on it you ever find: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Template parameters

This template prefers block formatting of parameters.

Parameter		Description	Type	Status
Content	1	no description	Content	required
Horizontal align (justify-content)	justify content	How items should align horizontally. Suggested values flex-start center flex-end start end left right space-between space-around space-evenly Default flex-start Auto value flex-start	String	suggested
Row items vertical align (align-items)	align items	How items of a row should align vertically. Suggested values stretch start center end baseline Default stretch Auto value stretch	String	suggested
Rows vertical align (align-content)	align content	How rows (not individual items) should align vertically. Suggested values normal start center end stretch space-between space-around space-evenly Default normal Auto value normal	String	suggested
Direction (flex-direction)	flex direction	In what directions should items go. Suggested values row row-reverse column column-reverse	Unknown	suggested
Gap	gap	The spacing between every item. Column/row gaps can be overriden by the Column/Row Gap parameters. Default 0.5rem Auto value 0.5rem	String	suggested
Column Gap (column-gap)	column gap	Vertical spacing between the items (coumns). Overrides the Gap parameter (only for the column gap).	String	suggested
Row Gap (row-gap)	row gap	Spacing between the rows (not individual items). Overrides the Gap parameter (only for the row gap).	String	suggested
Wrap (flex-wrap)	flex wrap	How items should wrap. Suggested values nowrap wrap wrap-reverse Default wrap Auto value wrap	Unknown	suggested