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

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

CSS

 * The parent container has the class
 * Each child has the class

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  to the children (with, etc.), or by manually setting the margin as needed with , 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.  and tables) will be flexibly wrapped. You can use the class  to apply the default child padding, or you can do this manually if that is not suitable.

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

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.

 This is a a div.

Padding is provided by

 This is a a div.

Padding is provided by