The Flex Luthor Flexbox Layout System

Alternatively known as Oh no why did they make an abstraction for Flexbox. View on GitHub.

Simple Layouts

Two Column

First cell
Second cell
View Source 
<div class="fl fl-debug">
	<div>First cell</div>
	<div>Second cell</div>
</div>

Five Column

Adding more cells divides the container evenly.

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-debug">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Gap Between Cells

Gaps are defaulted to 1em horizontal and .5em vertical. They only show between cells. Horizontal gaps are not shown when cells are all stacked. Vertical gaps are not shown when cells are in a single row.

Horizontal (--fl-gap-h: 2em)

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-debug" style="--fl-gap-h: 2em">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Vertical (--fl-gap-h: 1em)

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-debug" style="--fl-gap-v: 1em">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Both Vertical and Horizontal (--fl-gap-h: 2em; --fl-gap-v: 1em)

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-debug" style="--fl-gap-h: 2em; --fl-gap-v: 1em">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Stackpoint

This is the Flexbox Holy Abatross method from Heydon Pickering. This is a container width based breakpoint. Going below this width forces the layout to a single column.

Single Column below 27em (432px) Container Width

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-debug" style="--fl-stackpoint: 27em;">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Separators

Separators only show between cells between columns and rows. If all cells are stacked in a single column, no horizontal separators will be shown. Same for vertical separators and a single row of cells.

Horizontal

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl demo-fl-debug-sep fl-separator-h" style="--fl-separator-color: #333">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Vertical

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl demo-fl-debug-sep fl-separator-v" style="--fl-gap-v: 1em; --fl-separator-color: #333">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Both Horizontal and Vertical

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl demo-fl-debug-sep fl-separator-h fl-separator-v" style="--fl-gap-v: 1em; --fl-separator-color: #333">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Both Horizontal and Vertical (`rtl` direction)

First cell
Second cell
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl demo-fl-debug-sep fl-separator-h fl-separator-v" style="--fl-gap-v: 1em; --fl-separator-color: #333; direction: rtl">
	<div>First cell</div>
	<div>Second cell</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Prefer to Wrap Cell Before Content

By default, the content inside of a cell will wrap before the cell will wrap to a new line. To swap this so that the cell will wrap before the content wraps, add the flex-cell-wrap.

First cell
This cell will wrap to a new line before wrapping its content
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-debug">
	<div>First cell</div>
	<div class="fl-cell-wrap">This cell will wrap to a new line before wrapping its content</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

You can apply this to all cells in the layout with fl-nowrap on the container.

First cell
This cell will wrap to a new line before wrapping its content
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-nowrap fl-debug">
	<div>First cell</div>
	<div class="fl-cell-wrap">This cell will wrap to a new line before wrapping its content</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>

Inline Layout

Cells only take up their content width. This disables flex-grow on the cells. Works with fl-cell-wrap too.

First cell
This cell will wrap to a new line before wrapping its content
Third cell
Fourth cell
Fifth cell
View Source 
<div class="fl fl-inline fl-debug">
	<div>First cell</div>
	<div class="fl-cell-wrap">This cell will wrap to a new line before wrapping its content</div>
	<div>Third cell</div>
	<div>Fourth cell</div>
	<div>Fifth cell</div>
</div>