Template:Div flex row/doc

Usage

{{Div flex row}} provides a simple way to create a horizontal alignment for related page elements (producing multiple rows if the screen is too narrow). A closing {{Div flex row end}} is required after the final item being aligned.

Free text content needs to be encased in div tags in order to create the rows and columns. If this is required, the |div o=y parameter, inserting an opening div tag, may be used in conjunction with the {{Div CO}} template, inserting a closing and opening div tag:

Source

{{Div flex row |div o=y}}
Some content.
{{Div CO}}
Some more content.
{{Div CO}}
A third thing.
{{Div flex row end|div c=y}}

Result

Some content.

Some more content.

A third thing.

Examples

Three tables next to each other

{{Div flex row}}
<!--STANDARD TABLE MARKUP-->
{| class="wikitable"
|+ First table
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
{| class="wikitable"
|+ Second table

...

|-
| Example || Example || Example
|}
{{Div flex row end}}

First table

Header text	Header text	Header text
Example	Example	Example
Example	Example	Example
Example	Example	Example

Second table

Header text	Header text	Header text
Example	Example	Example
Example	Example	Example
Example	Example	Example

Third table

Header text	Header text	Header text
Example	Example	Example
Example	Example	Example
Example	Example	Example

A table next to a related map.

{{Div flex row|align-items=center}}
<!--STANDARD TABLE MARKUP-->
{| class="wikitable"
|+ Launch rollout timeline
! scope="col" | Launch date
! scope="col" | Country / Territory
|-
| rowspan="20" scope="row" | 13 February
| {{Flagu|Australia}}
|-
| {{Flagu|Austria}}
|-
| {{Flagu|Belgium}}

...

| {{Flagu|South Korea}}
|-
| {{Flagu|Tunisia}}
|}
<!--THE MAP AND ITS FRAME-->
{{image frame|align=none|content=
{{Highlighted world map by country
|AU=#ff1d65 |AT=#ff1d65 |BE=#ff1d65 

...

|KR=#ff9800 |TN=#ff9800
|scale=75 |projection=mercator}}
|caption={{Legend|#ff1d65|13 February}} {{Legend|#ff9800|20 April}}
}}
{{Div flex row end}}

Launch rollout timeline

Launch date	Country / Territory
13 February	Australia
	Austria
	Belgium
	Denmark
	Finland
	France
	Germany
	Iceland
	Ireland
	Italy
	Luxembourg
	Netherlands
	New Zealand
	Norway
	Portugal
	Singapore
	Spain
	Sweden
	Switzerland
	United Kingdom
20 April
	Hong Kong
	India
	Japan
	Morocco
	South Korea
	Tunisia

<graph>{"version":2,"height":1,"marks":[{"type":"path","properties":{"enter":{"path":{"field":"layout_path"}},"update":{"fill":{"field":"zipped.v"}},"hover":{"fill":{"value":"darkgrey"}}},"from":{"data":"countries"}}],"data":[{"name":"highlights","values":[{"id":"IN","v":"#ff9800"},{"id":"DE","v":"#ff1d65"},{"id":"FI","v":"#ff1d65"},{"id":"BE","v":"#ff1d65"},{"id":"LU","v":"#ff1d65"},{"id":"GB","v":"#ff1d65"},{"id":"NZ","v":"#ff1d65"},{"id":"IE","v":"#ff1d65"},{"id":"MA","v":"#ff9800"},{"id":"DK","v":"#ff1d65"},{"id":"AT","v":"#ff1d65"},{"id":"AU","v":"#ff1d65"},{"id":"SG","v":"#ff1d65"},{"id":"SE","v":"#ff1d65"},{"id":"KR","v":"#ff9800"},{"id":"JP","v":"#ff9800"},{"id":"HK","v":"#ff9800"},{"id":"CH","v":"#ff1d65"},{"id":"IT","v":"#ff1d65"},{"id":"ES","v":"#ff1d65"},{"id":"FR","v":"#ff1d65"},{"id":"TN","v":"#ff9800"},{"id":"IS","v":"#ff1d65"},{"id":"PT","v":"#ff1d65"},{"id":"NO","v":"#ff1d65"},{"id":"NL","v":"#ff1d65"}]},{"transform":[{"type":"geopath","translate":[0,0],"value":"data","projection":"mercator","scale":75},{"onKey":"id","type":"lookup","default":{"v":"silver"},"keys":["id"],"on":"highlights","as":["zipped"]}],"url":"wikiraw:///Template%3AGraph%3AMap%2FInner%2FWorldmap2c-json","name":"countries","format":{"feature":"countries","type":"topojson"}}],"width":1}</graph>

  13 February

  20 April

A template to help create horizontal groupings of related content.

Template parameters

Parameter		Description	Type	Status
Wrap	wrap	A pass-through for the CSS "flex-wrap" property. Default wrap Example wrap=wrap-reverse	String	optional
Align items	align-items	A pass-through for the CSS "align-items" property. Example align-items=center	String	optional
Justify content	justify-content	A pass-through for the CSS "justify-content" property. Example justify-content=center	String	optional
Opening div	div o	An opening div tag for the first block of content. Some content (such as free text) requires this to create the blocks used for the columns and rows. Example div o=y	Boolean	optional
Gap	gap	The flexbox gap parameter, which specifies a minimum spacing between items; a CSS length value. Units of "em" are recommended. Default 0.8em	String	optional

See also

• {{Gallery layout}} – similar template