Template:Flexbox wrap

Template documentationview edit history purge

This template uses TemplateStyles:

Template:Flexbox wrap/styles.css^[e] (sandbox) ^[e]

This template is used to create multiple blocks of content of equal width that are laid out side-by-side. The reader's web browser will shrink the width of the blocks as needed to try to fit them in the available width of the page. If there is insufficient space, then the blocks that cannot fit will wrap below the preceding blocks.

Usage

{{Flexbox wrap|start}}
Text for first block of text.
{{Flexbox wrap|break}}
Text for second block of text.
{{Flexbox wrap|break}}
...
{{Flexbox wrap|break}}
Text for N-th block of text.
{{Flexbox wrap|end}}

<!-- Please prefer not using the min_width parameter, as it will cause horizontal scrolling if the value is greater than the browser's viewport. -->
{{Flexbox wrap|start|min_width=width in CSS units}}
Text for first block of text
{{Flexbox wrap|break|min_width=width in CSS units}}
...
{{Flexbox wrap|end}}

Examples

{{Flexbox wrap|start}}
=== American League ===
{{2009 AL East standings|seeds=1:Baltimore Orioles,4:Tampa Bay Rays,6:Toronto Blue Jays}}
{{2009 AL Central standings|seeds=3:Minnesota Twins}}
{{2009 AL West standings||seeds=2:Los Angeles Angels of Anaheim,5:Texas Rangers}}
{{Flexbox wrap|break}}
=== National League ===
{{2009 NL East standings|seeds=1:Atlanta Braves,4:Philadelphia Phillies,6:Miami Marlins}}
{{2009 NL Central standings|seeds=3:Milwaukee Brewers}}
{{2009 NL West standings|seeds=2:Los Angeles Dodgers,5:Arizona Diamondbacks}}
{{Flexbox wrap|end}}

Output (reduce the width of the browser window to see the wrapping behaviour):

American League

v
t
e
AL East
Team	W	L	Pct.	GB	Home	Road
New York Yankees	103	59	.636	—	57‍–‍24	46‍–‍35
Boston Red Sox	95	67	.586	8	56‍–‍25	39‍–‍42
⁽⁴⁾ Tampa Bay Rays	84	78	.519	19	52‍–‍29	32‍–‍49
⁽⁶⁾ Toronto Blue Jays	75	87	.463	28	44‍–‍37	31‍–‍50
⁽¹⁾ Baltimore Orioles	64	98	.395	39	39‍–‍42	25‍–‍56

v
t
e
AL Central
Team	W	L	Pct.	GB	Home	Road
⁽³⁾ Minnesota Twins	87	76	.534	—	49‍–‍33	38‍–‍43
Detroit Tigers	86	77	.528	1	51‍–‍30	35‍–‍47
Chicago White Sox	79	83	.488	7½	43‍–‍38	36‍–‍45
Cleveland Indians	65	97	.401	21½	35‍–‍46	30‍–‍51
Kansas City Royals	65	97	.401	21½	33‍–‍48	32‍–‍49

v
t
e
AL West
Team	W	L	Pct.	GB	Home	Road
⁽²⁾ Los Angeles Angels of Anaheim	97	65	.599	—	49‍–‍32	48‍–‍33
⁽⁵⁾ Texas Rangers	87	75	.537	10	48‍–‍33	39‍–‍42
Seattle Mariners	85	77	.525	12	48‍–‍33	37‍–‍44
Oakland Athletics	75	87	.463	22	40‍–‍41	35‍–‍46

National League

v
t
e
NL East
Team	W	L	Pct.	GB	Home	Road
⁽⁴⁾ Philadelphia Phillies	93	69	.574	—	45‍–‍36	48‍–‍33
Florida Marlins	87	75	.537	6	43‍–‍38	44‍–‍37
⁽¹⁾ Atlanta Braves	86	76	.531	7	40‍–‍41	46‍–‍35
New York Mets	70	92	.432	23	41‍–‍40	29‍–‍52
Washington Nationals	59	103	.364	34	33‍–‍48	26‍–‍55

v
t
e
NL Central
Team	W	L	Pct.	GB	Home	Road
St. Louis Cardinals	91	71	.562	—	46‍–‍35	45‍–‍36
Chicago Cubs	83	78	.516	7½	46‍–‍34	37‍–‍44
⁽³⁾ Milwaukee Brewers	80	82	.494	11	40‍–‍41	40‍–‍41
Cincinnati Reds	78	84	.481	13	40‍–‍41	38‍–‍43
Houston Astros	74	88	.457	17	44‍–‍37	30‍–‍51
Pittsburgh Pirates	62	99	.385	28½	40‍–‍41	22‍–‍58

v
t
e
NL West
Team	W	L	Pct.	GB	Home	Road
⁽²⁾ Los Angeles Dodgers	95	67	.586	—	50‍–‍31	45‍–‍36
Colorado Rockies	92	70	.568	3	51‍–‍30	41‍–‍40
San Francisco Giants	88	74	.543	7	52‍–‍29	36‍–‍45
San Diego Padres	75	87	.463	20	42‍–‍39	33‍–‍48
⁽⁵⁾ Arizona Diamondbacks	70	92	.432	25	36‍–‍45	34‍–‍47

Although the following example demonstrates how to use the |min_width= parameter, please prefer not using it, as it will cause horizontal scrolling if the value is greater than the browser's viewport.

{{Flexbox wrap|start|min_width=20em}}
* Clarity of thoughts
* Effective presentation
* Concise expression
* Precise vocabulary
{{Flexbox wrap|break|min_width=20em}}
* Meandering description
* Lack of cohesion
* Overly verbose
* Inaccurate terminology
{{Flexbox wrap|break|min_width=20em}}
* Iterative revisions
* Develop outline and structure
* Trim unnecessary phrases
* Focus on words used
{{Flexbox wrap|end}}

Output (reduce the width of the browser window to see the wrapping behaviour):

Clarity of thoughts
Effective presentation
Concise expression
Precise vocabulary

Meandering description
Lack of cohesion
Overly verbose
Inaccurate terminology

Iterative revisions
Develop outline and structure
Trim unnecessary phrases
Focus on words used

Template Data

This is the TemplateData for this template used by TemplateWizard, VisualEditor and other tools. See a monthly parameter usage report for Template:Flexbox wrap in articles based on its TemplateData.

TemplateData for Flexbox wrap

Lay out equal width blocks of content side-by-side. Any blocks that cannot fit are wrapped below the previous blocks.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
start, break, or end	`1`	start = start the first block of content; break = start the next block of content; end = end all blocks of content Suggested values `start` `break` `end`	String	required
minimum block width	`min_width`	Minimum width for this block of content, in CSS units (e.g., '20em'). Optional; by default, there is no minimum width. Please prefer not using this parameter, as it will cause horizontal scrolling if the value is greater than the browser's viewport.	String	optional

The above documentation is transcluded from Template:Flexbox wrap/doc.
Editors can experiment in this template's sandbox and testcases pages.
Add categories to the /doc subpage. Subpages of this template.