Template:Flex wrap centre/doc

Usage

Produces a simple flex-box layout that allows content to be displayed side-by-side on wide screens and containers, but have it wrap "responsively" on narrow screens or containers.

This often happens when images are side-by-side, and do not fix on narrow screens, such as phones and e-readers, but can also but used in general for any content which was originally side-by-side but can be usefully wrapped on a small screen.

Additionally, images in the cells will be rescaled proportionally to not exceed the cell boundaries and "spill out" over other content or off the screen.

Parameters

• 1, 2, 3, 4: the context of each child "cell"
• Styling
  • align: text alignment of the whole structure Optional, default: center.
  • max-width: max-width of the whole structure to for wrapping before 100% page width. Optional, default: not set.
  • align-items: alignment of cells on the cross-axis (usually vertical). Any valid CSS for align-items, but most useful are stretch (default), flex-begin, center and flex-end (align top, middle and bottom, respectively).
  • align-content: behaviour of cells on the cross-axis (usually vertical) when there is more than one row. Any valid CSS for align-content.
  • class, style: extra CSS classes and styles for the parent container. Optional.
  • child_class, child_style: extra CSS class an styles to apply to every child cell. Optional.
  • child_classN, child_styleN (where N is 1,2,3,..): extra CSS class an styles to apply to individual child cells. Optional.

CSS

• The parent container has the class _flex_wrap_centre
• Each child has the class _flex_child

By default, a 0.5em margin is applied to each child cell to keep images slightly apart. This can be overridden either by adding the class _no_margin to the children (with child_class, etc.), or by manually setting the margin as needed with child_style, etc..

Split usage

There is a split template pair, {{Flex wrap centre/s}} and {{Flex wrap centre/e}}, which can be used to open the flex environment. Within this environment, block elements (e.g. <div> and tables) will be flexibly wrapped. You can use the class _flex_child to apply the default child padding, or you can do this manually if that is not suitable.

Other child formatting (child_class, etc.) has to be applied manually in this case - only the parent-level parameters can be passed to {{Flex wrap centre/s}}.

Examples

Split template example

Use the split template to make it easier to use table markup, which is otherwise awkward to place within a template parameter.

{{flex wrap centre/s}}
{| class="wikitable _flex_child"
| This || is || a
| colspan=3 | table
|}
<div class="_flex_child" style="background-color:lightgrey;">
This is a a div.

Padding is provided by <code>_flex child</code>
[[File:Old man's wish (circa. 1813-1820) - page 1.png|250px|center]]
</div>
{{flex wrap centre/e}}
</div>

This

is

a

table

This is a a div.

Padding is provided by _flex child

See also

• {{Block centre}} for centering a single block in the page.
• {{Div col}} for columns of content where the break-point don't need to be set manually