Template:Flex columns/doc

This template creates a column layout, where contents within the columns will have the same height, with any extra whitespace distributed throughout the shorter columns contents. It is mainly intended for use in portals.

This sort of layout requires browsers to support CSS flexbox. For those that don't there is a fallback that will show a two column view, but without the heights being the same (a layout many portals used as at July 2018).

For narrow screens, e.g. mobile devices, the display reverts to a single column.

Usage
Only contents which are in tags will have extra whitespace distributed to them – except for those with class   (or otherwise override the   property)

To change the column balance, flex1 and/or flex2 can be set. The default for each is. For example: Note that the actual column balance will vary depending on screen size, since the minimum width of each column is set at 360px.
 * will result in the first column taking up to 60% (3/5) of the available width, and the second column taking up at least 40% (2/5) of the width.