Difference between revisions of "Template:Flex columns/doc"
imported>Pppery |
|||
Line 3: | Line 3: | ||
{{Uses Lua|Module:Flex columns}} | {{Uses Lua|Module:Flex columns}} | ||
{{Uses TemplateStyles|Template:Flex columns/styles.css}} | {{Uses TemplateStyles|Template:Flex columns/styles.css}} | ||
− | <!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) --> | + | <!-- Please place template categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) --> |
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 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 | + | This sort of layout requires browsers to support [[CSS Flexible Box Layout|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. | For narrow screens, e.g. mobile devices, the display reverts to a single column. | ||
Line 24: | Line 24: | ||
<includeonly>{{sandbox other|| | <includeonly>{{sandbox other|| | ||
− | <!-- | + | <!-- Template categories below this line, please; interwikis at Wikidata --> |
− | + | [[Category:Multi-column templates]] | |
− | |||
}}</includeonly> | }}</includeonly> |
Revision as of 15:01, 3 September 2020
![]() | This is a documentation subpage for Template:Flex columns. It contains usage information, categories and other content that is not part of the original template page. |
![]() | This template is used on approximately 4,800 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.
Transclusion count updated automatically (see documentation). |
Template:Uses Lua Script error: No such module "Uses TemplateStyles". 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
{{Flex columns |1 = (...first column contents...) |2 = (...second column contents...) }}
Only contents which are in <div>...</div>
tags will have extra whitespace distributed to them – except for those with class flex-columns-noflex
(or otherwise override the flex:
property)
To change the column balance, |flex1=
and/or |flex2=
can be set. The default for each is 1
. For example:
|flex1=3 |flex2=2
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.
Note that the actual column balance will vary depending on screen size, since the minimum width of each column is set at 360px.
See also