Flex Container: Difference between revisions
From HorizonXI Wiki
(Created page with "= Flex Container = This page describes how to use the page styling tool 'Flex-Container'. It's used to split a page into 2, 3 or 4 sections while maintaining mobile responsivity. This is the preferred method of achieving this and should take priority over splitting a page via tables. Useage is best explained via examples: '''Example 1''' <nowiki><div class="flex-container"></nowiki> <nowiki><div class="flex-container-item-2"></nowiki> <nowiki>== Heading 1 ==</nowiki>...") |
No edit summary |
||
| Line 98: | Line 98: | ||
---- | ---- | ||
__NOTOC__ | __NOTOC__ | ||
[[Category:Editing Documentation]] | |||
Latest revision as of 21:05, 1 October 2023
Flex Container
This page describes how to use the page styling tool 'Flex-Container'. It's used to split a page into 2, 3 or 4 sections while maintaining mobile responsivity. This is the preferred method of achieving this and should take priority over splitting a page via tables. Useage is best explained via examples:
Example 1
<div class="flex-container"> <div class="flex-container-item-2"> == Heading 1 == Content, including tables, templates, images etc. </div> <div class="flex-container-item-2> == Heading 2 == Further content </div></div>
Results in...
Heading 1
Content, including tables, templates, images etc.
Heading 2
Further content
Example 2
<div class="flex-container"> <div class="flex-container-item-3"> == Heading 1 == Content, including tables, templates, images etc. </div> <div class="flex-container-item-3> == Heading 2 == Further content </div> <div class="flex-container-item-3> == Heading 3 == Further content still </div></div>
Results in...
Heading 1
Content, including tables, templates, images etc.
Heading 2
Further content
Heading 3
Further content still
Example 3
<div class="flex-container"> <div class="flex-container-item-4"> == Heading 1 == Content, including tables, templates, images etc. </div> <div class="flex-container-item-4> == Heading 2 == Further content </div> <div class="flex-container-item-4> == Heading 3 == Further content still </div> <div class="flex-container-item-4> == Heading 4 == Even more content </div>
Results in...
Heading 1
Content, including tables, templates, images etc.
Heading 2
Further content
Heading 3
Further content still
Heading 4
Even more content
