 | This template uses Lua: |
 | This template uses TemplateStyles: |
Side-by-side columns, based on CSS flexbox.
One of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can adjust in size—either decreasing, to avoid unnecessarily monopolizing space, or increasing to make room for contents to fit within its boundaries. Moreover, the flex layout is less restrictive in terms of content flow than that of other CSS layout models, which are generally uni-directional.
Use
editThe below examples are using the templates directly:
{{col-flex}}
Column 1
*a
*b
*c
*d
{{col-flex-break}}
Column 2
*e
*f
*g
*h
{{col-flex-end}}
Produces
Column 1
- a
- b
- c
- d
Column 2
- e
- f
- g
- h
{{col-flex}}
{| class="wikitable"
|+Table1
|-
| a || b || c
|-
| d || e || f
|-
| g || h || i
|}
{{col-flex-break}}
{| class="wikitable"
|+Table2
|-
| 1 || 2 || 3
|-
| 4 || 5 || 6
|-
| 7 || 8 || 9
|}
{{col-flex-end}}
Produces:
| a | b | c |
| d | e | f |
| g | h | i |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Example
edit| Rank | Nation | Gold | Silver | Bronze | Total |
|---|---|---|---|---|---|
| 1 |  United States‡ | 40 | 44 | 42 | 126 |
| 2 |  China | 40 | 27 | 24 | 91 |
| 3 |  Japan | 20 | 12 | 13 | 45 |
| 4 |  Australia | 18 | 19 | 16 | 53 |
| 5 |  France* | 16 | 26 | 22 | 64 |
| 6 |  Netherlands | 15 | 7 | 12 | 34 |
| 7 |  Great Britain | 14 | 22 | 29 | 65 |
| Totals (7 entries) | 163 | 157 | 158 | 478 | |
| Rank | Nation | Gold | Silver | Bronze | Total |
|---|---|---|---|---|---|
| 1 | United States | 39 | 41 | 33 | 113 |
| 2 | China | 38 | 32 | 19 | 89 |
| 3 | Japan* | 27 | 14 | 17 | 58 |
| 4 | Great Britain | 22 | 20 | 22 | 64 |
| 5 |  ROC | 20 | 28 | 23 | 71 |
| 6 | Australia | 17 | 7 | 22 | 46 |
| 7 | Netherlands | 10 | 12 | 14 | 36 |
| Totals (7 entries) | 173 | 154 | 150 | 477 | |
{{col-flex}}
{{Medals table
| caption = 2024 Summer Olympics medal table
| host = [[France]]
| flag_template = flag IOC
| event = 2024 Summer
| gold_USA = 40 | silver_USA = 44 | bronze_USA = 42 | note_USA = {{double dagger}}
| gold_CHN = 40 | silver_CHN = 27 | bronze_CHN = 24
| gold_JPN = 20 | silver_JPN = 12 | bronze_JPN = 13
| gold_AUS = 18 | silver_AUS = 19 | bronze_AUS = 16
| gold_FRA = 16 | silver_FRA = 26 | bronze_FRA = 22 | host_FRA = yes
| gold_NED = 15 | silver_NED = 7 | bronze_NED = 12
| gold_GBR = 14 | silver_GBR = 22 | bronze_GBR = 29
}}
{{col-flex-break}}
{{Medals table
| caption = 2020 Summer Olympics medal table
| host = [[Japan]]
| flag_template = flag IOC
| event = 2020 Summer
| gold_USA = 39 | silver_USA = 41 | bronze_USA = 33 |
| gold_CHN = 38 | silver_CHN = 32 | bronze_CHN = 19 |
| gold_JPN = 27 | silver_JPN = 14 | bronze_JPN = 17 | host_JPN = Yes
| gold_GBR = 22 | silver_GBR = 20 | bronze_GBR = 22 |
| gold_ROC = 20 | silver_ROC = 28 | bronze_ROC= 23 |
| gold_AUS = 17 | silver_AUS = 7 | bronze_AUS = 22 |
| gold_NED = 10 | silver_NED = 12 | bronze_NED = 14 |
}}
{{col-flex-end}}
See also
editColumn-generating template families
editThe templates listed here are not interchangeable. For example, using {{col-float}} with {{col-end}} instead of {{col-float-end}} would leave a <div>...</div> open, potentially harming any subsequent formatting.
| Type | Family | Handles wiki
table code?† |
Responsive/ mobile suited |
Start template | Column divider | End template |
|---|---|---|---|---|---|---|
| Float | "col-float" | Yes | Yes | {{col-float}} | {{col-float-break}} | {{col-float-end}} |
| "columns-start" | Yes | Yes | {{columns-start}} | {{column}} | {{columns-end}} | |
| Columns | "div col" | Yes | Yes | {{div col}} | – | {{div col end}} |
| "columns-list" | No | Yes | {{columns-list}} (wraps div col) | – | – | |
| Flexbox | "flex columns" | No | Yes | {{flex columns}} | – | – |
| Table | "col" | Yes | No | {{col-begin}}, {{col-begin-fixed}} or {{col-begin-small}} |
{{col-break}} or {{col-2}} .. {{col-5}} |
{{col-end}} |
† Can the template handle the basic wiki markup {| | || |- |} used to create tables? If not, special templates that produce these elements (such as {{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}) or HTML tags (<table>...</table>, <tr>...</tr>, etc.) need to be used instead.