DOSEN PROFIL LENGKAP

This is a documentation subpage for Template:Col-flex.
It may contain usage information, categories and other content that is not part of the original template page.

This template uses Lua:

Module:Separated entries (sandbox)

This template uses TemplateStyles:

Template:Col-flex/styles.css^[e]

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}}

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}}
Float	"columns-start"	Yes	Yes	{{columns-start}}	{{column}}	{{columns-end}}
Columns	"div col"	Yes	Yes	{{div col}}	instead use {{no col break}}	{{div col end}}
Columns	"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.

DOSEN PROFIL LENGKAP

Template:Col-flex/doc

Use

Example

See also

Column-generating template families

Content Disclaimer