Edge Rewrite
// HTMLRewriter · presentation

This page was redesigned at the edge.

Cloudflare fetched the original article and streamed it through HTMLRewriter to apply an entirely new visual system without rebuilding the source page.

Jump to content

Template:Flexbox wrap/doc

From Wikipedia, the free encyclopedia

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

[edit]
{{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

[edit]
{{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

[edit]
AL East
Team W L Pct. GB Home Road
New York Yankees 10359 .636 — 57‍–‍24 46‍–‍35
Boston Red Sox 9567 .586 8 56‍–‍25 39‍–‍42
(4) Tampa Bay Rays 8478 .519 19 52‍–‍29 32‍–‍49
(6) Toronto Blue Jays 7587 .463 28 44‍–‍37 31‍–‍50
(1) Baltimore Orioles 6498 .395 39 39‍–‍42 25‍–‍56
AL Central
Team W L Pct. GB Home Road
(3) Minnesota Twins 8776 .534 — 49‍–‍33 38‍–‍43
Detroit Tigers 8677 .528 1 51‍–‍30 35‍–‍47
Chicago White Sox 7983 .488 7½ 43‍–‍38 36‍–‍45
Cleveland Indians 6597 .401 21½ 35‍–‍46 30‍–‍51
Kansas City Royals 6597 .401 21½ 33‍–‍48 32‍–‍49
AL West
Team W L Pct. GB Home Road
(2) Los Angeles Angels of Anaheim 9765 .599 — 49‍–‍32 48‍–‍33
(5) Texas Rangers 8775 .537 10 48‍–‍33 39‍–‍42
Seattle Mariners 8577 .525 12 48‍–‍33 37‍–‍44
Oakland Athletics 7587 .463 22 40‍–‍41 35‍–‍46

National League

[edit]
NL East
Team W L Pct. GB Home Road
(4) Philadelphia Phillies 9369 .574 — 45‍–‍36 48‍–‍33
Florida Marlins 8775 .537 6 43‍–‍38 44‍–‍37
(1) Atlanta Braves 8676 .531 7 40‍–‍41 46‍–‍35
New York Mets 7092 .432 23 41‍–‍40 29‍–‍52
Washington Nationals 59103 .364 34 33‍–‍48 26‍–‍55
NL Central
Team W L Pct. GB Home Road
St. Louis Cardinals 9171 .562 — 46‍–‍35 45‍–‍36
Chicago Cubs 8378 .516 7½ 46‍–‍34 37‍–‍44
(3) Milwaukee Brewers 8082 .494 11 40‍–‍41 40‍–‍41
Cincinnati Reds 7884 .481 13 40‍–‍41 38‍–‍43
Houston Astros 7488 .457 17 44‍–‍37 30‍–‍51
Pittsburgh Pirates 6299 .385 28½ 40‍–‍41 22‍–‍58
NL West
Team W L Pct. GB Home Road
(2) Los Angeles Dodgers 9567 .586 — 50‍–‍31 45‍–‍36
Colorado Rockies 9270 .568 3 51‍–‍30 41‍–‍40
San Francisco Giants 8874 .543 7 52‍–‍29 36‍–‍45
San Diego Padres 7587 .463 20 42‍–‍39 33‍–‍48
(5) Arizona Diamondbacks 7092 .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

[edit]
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.

ParameterDescriptionTypeStatus
start, break, or end1

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
Stringrequired
minimum block widthmin_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.

Stringoptional