The Flex system

A 12 column system and a shrink/auto row system implemented with flex

Classes

.fx-cont

Flex container with 12 even columns along the X axis

.fx-{x}{num}

Where {x} is the screen size and {num} is the column width inside of an fx-cont element. Here is a table with all of the options:

	Small	Medium	Large
1	fx-s1	fx-m1	fx-l1
2	fx-s2	fx-m2	fx-l2
3	fx-s3	fx-m3	fx-l3
4	fx-s4	fx-m4	fx-l4
5	fx-s5	fx-m5	fx-l5
6	fx-s6	fx-m6	fx-l6
7	fx-s7	fx-m7	fx-l7
8	fx-s8	fx-m8	fx-l8
9	fx-s9	fx-m9	fx-l9
10	fx-s10	fx-m10	fx-l10
11	fx-s11	fx-m11	fx-l11
12	fx-s12	fx-m12	fx-l12

.fx-sshrink, .fx-mshrink, .fx-lshrink

Have the column for its respective size inside of an fx-cont element shrink to be only the size it needs to be

.fx-sauto, .fx-mauto, .fx-lauto

Have the column for its respective size inside of an fx-cont element expand to fit the size available to it

.fxy-cont

Flex container along the Y axis

.fxy-shrink

Have the row for its respective size inside of an fxy-cont element shrink to be only the size it needs to be

.fxy-auto

Have the row for its respective size inside of an fxy-cont element expand to fit the size available to it

Examples

Fixed column sizes

<div class="fx-cont">
	<div class="fx-12 fx-m4">
		<p>I span the full width of a small screen but a third of a medium or larger screen</p>
	</div>
	<div class="fx-12 fx-m8">
		<p>I span the full width of a small screen but two thirds of a medium or larger screen</p>
	</div>
</div>

Shrink/expand columns

<div class="fx-cont">
	<div class="fx-12 fx-mshrink">
		<p>I span the full width of a small screen but shrink on a medium or larger screen</p>
	</div>
	<div class="fx-12 fx-mauto">
		<p>I span the full width of a small screen but expand on a medium or larger screen</p>
	</div>
</div>

Shrink/expand row

<body class="fxy-cont">
	<header class="fxy-shrink">
		<p>I am just the height that I need to be</p>
	</header>
	<main class="fxy-auto">
		<p>I grow to fill the height if space is available</p>
	</main>
	<footer class="fxy-shrink">
		<p>I am just the height that I need to be</p>
	</footer>
</body>