Flex Container

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

---