Template:Col-flex-end/doc

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

The 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:

Table1

a	b	c
d	e	f
g	h	i

Table2

1	2	3
4	5	6
7	8	9

Example

  *   Host nation (France)

2024 Summer Olympics medal table

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

  *   Host nation (Japan)

2020 Summer Olympics medal table

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

Column-generating template families

The 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.

Column templates

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.