FANDOM


Places a mobile and page layout friendly box around wiki page elements. Contents of the box will flow beside or underneath other flexboxes or wiki elements as layout changes, similar to how images and other inline elements work. Flexbox can be used in place of tables and cells to contain related groups of wiki elements, where mobile friendly page flow would normally not be possible. This template can be used in place of the 'col' table template constructs, See Template:col-begin.

Usage
  • 1 - if 'end', will mark the end of the flex box container
  • 1 or width - force width in pixels. Optional
  • 2 or vert - 'top' 'middle' 'bottom' vertical alignment. Default is 'top'
  • 3 or style - additional style. Optional
Note: 1 or width may also use 'em', '%', or 'px' postfixes, such as 25em, 25%, 25, and 25px. If no postfix then 'px' is used.
Examples
Note: Test these by stretching a desktop window to under and over the Desktop XL limit. Template:Map maps are already inline-block flexible and do not need Flexbox themselves. Flexbox allows ';A nice map' to be grouped together with the map into their own flexible box, just as is often common practice using table cells.

Basic maps with markers

{{flexbox}}
;A nice map
{{Map|Elwynn Forest|size=400|notes=
{{Map/Note|25.8|89.6|Skull|Hogger|Location##Elite mob;;Location::Hogger}}
{{Map/Note|39.4|60.5|Star|Graveyard|Point of Interest::Graveyard}}
{{Map/Note|24.4|78|Cross|Raid meets here|Location::Raid meets here}}
{{Map/Note|45.4|74.5|Wiki|Hogger|Location##Elite mob;;Location::Hogger}}
}}
{{flexbox|end}}
{{flexbox}}
;A map to the right on Desktop XL layout
{{Map|Elwynn Forest|size=400|notes=
{{Map/Note|25.8|89.6|Skull|Hogger|Location##Elite mob;;Location::Hogger}}
{{Map/Note|39.4|60.5|Star|Graveyard|Point of Interest::Graveyard}}
{{Map/Note|24.4|78|Cross|Raid meets here|Location::Raid meets here}}
{{Map/Note|45.4|74.5|Wiki|Hogger|Location##Elite mob;;Location::Hogger}}
}}
{{flexbox|end}}
A nice map
WorldMap-Elwynn
Wiki
A map to the right on Desktop XL layout
WorldMap-Elwynn
Wiki

Basic text

{{flexbox|400}}
;Some text
From [[w:c:community:Help:Tables]]: Although tables can be used for design....
{{flexbox|end}}
{{flexbox|400}}
;Some text to the right on Desktop XL layout
From [[w:c:community:Help:Tables]]: Although tables can be used for design...
{{flexbox|end}}
Some text

From w:c:community:Help:Tables: Although tables can be used for design, they shouldn't be. The results on mobile devices are awkward because tables aren't very responsive. That is, on differently sized displays, tables look different—and often are ugly. Throw pictures into tables and the results can easily get downright nasty on a phone. And if you're making whole pages or sections of articles out of tables, it'd probably be good to rethink that strategy.

Some text to the right on Desktop XL layout

From w:c:community:Help:Tables: Although tables can be used for design, they shouldn't be. The results on mobile devices are awkward because tables aren't very responsive. That is, on differently sized displays, tables look different—and often are ugly. Throw pictures into tables and the results can easily get downright nasty on a phone. And if you're making whole pages or sections of articles out of tables, it'd probably be good to rethink that strategy.


Live examples

Orgrimmar


Community content is available under CC-BY-SA unless otherwise noted.