flex.class
Using Flexbox through class names
Install
npm install -S flex.class
Usage
<ul class="flex flex-column">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item flex-align-end">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
or
<ul class="flex align-justify">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item align-self-bottom">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
Class names
Container
- fc | flex
flex-direction
-
fc-row | flex-row - (default) left to right in ltr; right to left in rtl
-
fc-row-reverse | flex-row-reverse - right to left in ltr; left to right in rtl
-
fc-col | flex-column - same as row but top to bottom
-
fc-col-reverse | flex-column-reverse - same as row-reverse but bottom to top
flex-wrap
- fc-nowrap | flex-nowrap - (default) single-line / left to right in ltr; right to left in rtl
Horizontal Alignment - justify-content
-
fc-left | flex-justify-start - (default) items are packed toward the start line
-
fc-right | flex-justify-end - items are packed toward to end line
-
fc-center | flex-justify-center - items are centered along the line
-
fc-between | flex-justify-space-between - first item is on the start line, last item on the end line
-
fc-around | flex-justify-space-around - first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies
Vertical Alignment - align-items
-
fc-top | flex-align-start - cross-start margin edge of the items is placed on the cross-start line
-
fc-bottom | flex-align-end - cross-end margin edge of the items is placed on the cross-end line
-
fc-middle | flex-align-center - items are centered in the cross-axis
-
fc-baseline | flex-align-baseline - items are aligned such as their baselines align
-
fc-stretch | flex-align-stretch - (default) stretch to fill the container (still respect min-width/max-width)
Items
- fc-item | flex-item
align-self
-
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
-
fc-item-top | flex-align-start
-
fc-item-bottom | flex-align-end
-
fc-item-middle | flex-align-center
-
fc-item-baseline | flex-align-baseline
-
fc-item-stretch | flex-align-stretch