View source for Template:Div flex row/doc

{{Documentation subpage}}
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
== Usage ==
{{tl|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 {{tl|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 {{para|div o|y}} parameter, inserting an opening div tag, may be used in conjunction with the {{tl|Div CO}} template, inserting a closing and opening div tag:

'''Source'''
<pre>
{{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}}
</pre>
'''Result'''
{{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}}
<!--
{{Div flex row |div o=y}}
'''Source'''
<pre>
{{Div flex row}}
*one
**two
*three

*A second
*list
{{Div flex row end}}
</pre>
{{div CO}}
'''Result'''
{{Div flex row}}
*one
**two
*three

*A second
*list
{{div DC}}
-->
===Examples===
Three tables next to each other
<pre>
{{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}}
</pre>

{{Div flex row}}
{| class="wikitable"
|+ First table
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
{| class="wikitable"
|+ Second table
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
{| class="wikitable"
|+ Third table
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
{{Div flex row end}}

A table next to a related map.
<pre>
{{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}}
</pre>

{{Div flex row|align-items=center}}
{| 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|Denmark}}
|-
| {{Flagu|Finland}}
|-
| {{Flagu|France}}
|-
| {{Flagu|Germany}}
|-
| {{Flagu|Iceland}}
|-
| {{Flagu|Ireland}}
|-
| {{Flagu|Italy}}
|-
| {{Flagu|Luxembourg}}
|-
| {{Flagu|Netherlands}}
|-
| {{Flagu|New Zealand}}
|-
| {{Flagu|Norway}}
|-
| {{Flagu|Portugal}}
|-
| {{Flagu|Singapore}}
|-
| {{Flagu|Spain}}
|-
| {{Flagu|Sweden}}
|-
| {{Flagu|Switzerland}}
|-
| {{Flagu|United Kingdom}}
|-
| scope="row" rowspan="7"| 20 April
|-
| {{Flagu|Hong Kong}}
|-
| {{Flagu|India}}
|-
| {{Flagu|Japan}}
|-
| {{Flagu|Morocco}}
|-
| {{Flagu|South Korea}}
|-
| {{Flagu|Tunisia}}
|}
{{image frame|align=none|content=
{{Highlighted world map by country
|AU=#ff1d65 |AT=#ff1d65 |BE=#ff1d65 |DK=#ff1d65 |FI=#ff1d65 |FR=#ff1d65 |DE=#ff1d65 |IS=#ff1d65 |IE=#ff1d65 |IT=#ff1d65 |LU=#ff1d65 |NL=#ff1d65 |NZ=#ff1d65 |NO=#ff1d65 |PT=#ff1d65 |SG=#ff1d65 |ES=#ff1d65 |SE=#ff1d65 |CH=#ff1d65 |GB=#ff1d65 |HK=#ff9800 |IN=#ff9800 |JP=#ff9800 |MA=#ff9800 |KR=#ff9800 |TN=#ff9800
|scale=75 |projection=mercator}}
|caption={{Legend|#ff1d65|13 February}} {{Legend|#ff9800|20 April}}
}}
{{Div flex row end}}
<includeonly>{{sandbox other||
<!-- Categories below this line; interwikis at Wikidata -->
[[Category:Wikipedia XHTML tag-replacing templates]]
[[Category:Layout templates]]
}}</includeonly>
<templatedata>
{
	"params": {
		"wrap": {
			"label": "Wrap",
			"description": "A pass-through for the CSS \"flex-wrap\" property.",
			"example": "wrap=wrap-reverse",
			"type": "string",
			"default": "wrap"
		},
		"align-items": {
			"label": "Align items",
			"description": "A pass-through for the CSS \"align-items\" property.",
			"example": "align-items=center",
			"type": "string"
		},
		"justify-content": {
			"label": "Justify content",
			"description": "A pass-through for the CSS \"justify-content\" property.",
			"example": "justify-content=center",
			"type": "string"
		},
		"div o": {
			"label": "Opening div",
			"description": "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",
			"type": "boolean"
		},
		"gap": {
			"label": "Gap",
			"description": "The flexbox gap parameter, which specifies a minimum spacing between items; a CSS length value. Units of \"em\" are recommended.",
			"type": "string",
			"default": "0.8em"
		}
	},
	"description": "A template to help create horizontal groupings of related content. "
}
</templatedata>

==See also==
* {{tl|Gallery layout}} – similar template