Template:Div flex row
Template documentationUsage
{{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}}
| Header text | Header text | Header text |
|---|---|---|
| Example | Example | Example |
| Example | Example | Example |
| Example | Example | Example |
| Header text | Header text | Header text |
|---|---|---|
| Example | Example | Example |
| Example | Example | Example |
| Example | Example | Example |
| 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 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
|
A template to help create horizontal groupings of related content.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Wrap | wrap | A pass-through for the CSS "flex-wrap" property.
| String | optional |
| Align items | align-items | A pass-through for the CSS "align-items" property.
| String | optional |
| Justify content | justify-content | A pass-through for the CSS "justify-content" property.
| 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.
| Boolean | optional |
| Gap | gap | The flexbox gap parameter, which specifies a minimum spacing between items; a CSS length value. Units of "em" are recommended.
| String | optional |
See also
- {{Gallery layout}} – similar template