Template:Flexbox wrap/doc

__EXPECTED_UNCONNECTED_PAGE__

This template is used to create multiple blocks of content that are laid out side-by-side. By default, the blocks are equal width. 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}}


<!-- To define a target width ratio for each block: -->
{{Flexbox wrap|start|flex=1}}
Text for first block of text.
{{Flexbox wrap|break|flex=2}}
Text for second block of text. Its target width is twice the width of the first block.
{{Flexbox wrap|break|flex=3}}
Text for third block of text. Its target width is three times the width of the first block.
{{Flexbox wrap|end}}


<!-- Prefer using something like min_width=min(20em, 90%), to avoid horizontal scrolling with narrow browser viewports. -->
{{Flexbox wrap|start|min_width=min(20em, 90%)}}
Text for first block of text
{{Flexbox wrap|break|min_width=min(20em, 90%)}}
...
{{Flexbox wrap|end}}

Examples

To see the wrapping behaviour, reduce the width of the browser window.

Two sections of content

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

American League

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
(4) Tampa Bay Rays	84	78	.519	19	52‍–‍29	32‍–‍49
(6) Toronto Blue Jays	75	87	.463	28	44‍–‍37	31‍–‍50
(1) Baltimore Orioles	64	98	.395	39	39‍–‍42	25‍–‍56

AL Central

Team	W	L	Pct.	GB	Home	Road
(3) 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

AL West

Team	W	L	Pct.	GB	Home	Road
Los Angeles Angels	97	65	.599	—	49‍–‍32	48‍–‍33
(5) 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

NL East

Team	W	L	Pct.	GB	Home	Road
(4) Philadelphia Phillies	93	69	.574	—	45‍–‍36	48‍–‍33
Florida Marlins	87	75	.537	6	43‍–‍38	44‍–‍37
(1) 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

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
(3) 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

NL West

Team	W	L	Pct.	GB	Home	Road
(2) 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
(5) Arizona Diamondbacks	70	92	.432	25	36‍–‍45	34‍–‍47

Content with different widths

Target ratios for the widths of the blocks of content can be set using the |flex= parameter. The following example is for three blocks of content with relative widths of 1:1:2.

{{Flexbox wrap|start|flex=1}}
Basic colour
# red
# yellow
# green
{{Flexbox wrap|break|flex=1}}
Fancy colour
# crimson
# amber
# sherwood
{{Flexbox wrap|break|flex=2}}
Description
# Requires immediate attention and action. Do not ignore or else the consequences may be severe.
# Take necessary precautions to monitor for a critical situation that may occur.
# All clear to proceed with normal activity, without any need for special caution.
{{Flexbox wrap|end}}

Basic colour

1. red
2. yellow
3. green

Fancy colour

1. crimson
2. amber
3. sherwood

Description

1. Requires immediate attention and action. Do not ignore or else the consequences may be severe.
2. Take necessary precautions to monitor for a critical situation that may occur.
3. All clear to proceed with normal activity, without any need for special caution.

Specifying minimum width

Prefer using something like |min_width=min(20em, 90%), so the width will not be larger than the available space within the browser's viewport. Otherwise, there will be horizontal scrolling when the width exceeds the viewport's width.

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

Output:

• 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

Smaller font size

To reduce the font size, use {{Flexbox wrap|start|small=yes}}, which sets the size to 90% of the original value.

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

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
flexible size ratio	flex	When set for all blocks of content, defines a target width ratio for each block, relative to the others.	Number	optional
minimum block width	min_width	Minimum width for this block of content, in CSS units, such as min(20em, 90%). Optional; by default, there is no minimum width. Please prefer a value with the min() function limiting the width, to avoid horizontal scrolling with narrow browser viewports.	String	optional
small font	small	Use a smaller font size (90%). Only takes effect if used with the start parameter, beginning the first block of content. Suggested values yes Auto value yes	String	optional