Template:Flex columns/doc - Revision history

https://pool.calebcooper.ie/index.php?action=history&feed=atom&title=Template%3AFlex_columns%2Fdoc Template:Flex columns/doc - Revision history 2026-04-07T22:52:34Z Revision history for this page on the wiki MediaWiki 1.43.8 https://pool.calebcooper.ie/index.php?title=Template:Flex_columns/doc&diff=15897&oldid=prev Caleb Cooper at 11:22, 10 November 2020 2020-11-10T11:22:57Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 11:22, 10 November 2020</td> </tr><tr> <td colspan="2" class="diff-lineno">Line 1:</td> <td colspan="2" class="diff-lineno">Line 1:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Documentation subpage}}</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Documentation subpage}}</div></td> </tr> <tr> <td class="diff-marker" data-marker="−"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>{{high-use<del style="font-weight: bold; text-decoration: none;">| 4800 </del>}}</div></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>{{high-use}}</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Uses Lua|Module:Flex columns}}</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Uses Lua|Module:Flex columns}}</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Uses TemplateStyles|Template:Flex columns/styles.css}}</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Uses TemplateStyles|Template:Flex columns/styles.css}}</div></td> </tr> </table>

Caleb Cooper https://pool.calebcooper.ie/index.php?title=Template:Flex_columns/doc&diff=15893&oldid=prev Caleb Cooper at 11:17, 10 November 2020 2020-11-10T11:17:27Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 11:17, 10 November 2020</td> </tr><tr> <td colspan="2" class="diff-lineno">Line 6:</td> <td colspan="2" class="diff-lineno">Line 6:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker" data-marker="−"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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).</div></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>This sort of layout requires browsers to support [[<ins style="font-weight: bold; text-decoration: none;">Wikipedia:</ins>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).</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>For narrow screens, e.g. mobile devices, the display reverts to a single column.</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>For narrow screens, e.g. mobile devices, the display reverts to a single column.</div></td> </tr> </table>

Caleb Cooper https://pool.calebcooper.ie/index.php?title=Template:Flex_columns/doc&diff=15892&oldid=prev Caleb Cooper: Created page with "{{Documentation subpage}} {{high-use| 4800 }} {{Uses Lua|Module:Flex columns}} {{Uses TemplateStyles|Template:Flex columns/styles.css}} <!-- Please place template categories w..." 2020-11-10T11:16:45Z

<p>Created page with "{{Documentation subpage}} {{high-use| 4800 }} {{Uses Lua|Module:Flex columns}} {{Uses TemplateStyles|Template:Flex columns/styles.css}} <br /> 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.<br /> <br /> 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).<br /> <br /> For narrow screens, e.g. mobile devices, the display reverts to a single column.<br /> == Usage ==<br /> <pre>{{Flex columns<br /> |1 = (...first column contents...)<br /> |2 = (...second column contents...)<br /> }}</pre><br /> Only contents which are in {{tag|div}} tags will have extra whitespace distributed to them – except for those with class <code>flex-columns-noflex</code> (or otherwise override the <code>flex:</code> property)<br /> <br /> To change the column balance, {{para|flex1}} and/or {{para|flex2}} can be set. The default for each is <code>1</code>. For example:<br /> *<code><nowiki>|flex1=3 |flex2=2</nowiki></code> 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.<br /> Note that the actual column balance will vary depending on screen size, since the minimum width of each column is set at 360px.<br /> <br /> <includeonly>{{sandbox other||<br /> <br /> [[Category:Multi-column templates]]<br /> }}</includeonly></div>

Caleb Cooper