Template:Flexbox

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


 * A nice map


 * A map to the right on Desktop XL layout


 * A nice map


 * A map to the right on Desktop XL layout

Basic text

From w:c:community:Help:Tables: Although tables can be used for design....
 * Some text

From w:c:community:Help:Tables: Although tables can be used for design...
 * 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.
 * 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

Orgrimmar
 * Live examples