Flexbox is a way to efficiently lay out, align, and distribute items on a page. If you want to learn more about Flexbox and how to use it, there is plenty of good documentation around the web (including this CSS Tricks article and this MDN spec).
One thing to note is that this system uses a flexible box layout model, which doesn't play particularly nice with our traditional grid model. When using Flexbox with Solid, be considerate about incorporating it independently of other Solid layout classes, such as floats or block (as flex will override these). Happy flexing!
| Class | Description |
|---|---|
| Display Flex | .xs-flex |
| Justify Content |
.xs-flex-justify-start,
.xs-flex-justify-end,
.xs-flex-justify-center,
.xs-flex-justify-space-between,
.xs-flex-justify-space-around
|
| Align Items |
.xs-flex-align-start,
.xs-flex-align-end,
.xs-flex-align-center
.xs-flex-align-space-between,
.xs-flex-align-space-around
|
| Grow & Shrink |
.xs-flex-grow-1,
.xs-flex-grow-2,
.xs-flex-grow-3,
.xs-flex-shrink-0,
.xs-flex-shrink-1
|
| Order | .xs-flex-order-1, .xs-flex-order-2, .xs-flex-order-3 |
| Direction | .xs-flex-row, .xs-flex-row-reverse, .xs-flex-column, .xs-flex-column-reverse |
Justify-content defines how items are aligned along the main axis. By default, the main axis is flex-row (left-to-right). If the parent module is defined as flex-column, then justify-content would determine how items are aligned top-to-bottom.
xs-flex .xs-flex-justify-start
This is the default alignment, which aligns items at the start of the main axis. Class applies to the parent
<div class="xs-flex xs-flex-justify-start xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>xs-flex .xs-flex-justify-end
This class aligns items at the end of the main axis. Class applies to the parent
<div class="xs-flex xs-flex-justify-end xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>xs-flex .xs-flex-justify-center
This class aligns items in the center of the main axis. Class applies to the parent
<div class="xs-flex xs-flex-justify-center xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>xs-flex .xs-flex-justify-space-between
This class aligns items in an evenly distributed manner on the main axis, but with the first and last item at the start and end of the main axis respectively. Class applies to the parent
<div class="xs-flex xs-flex-justify-space-between xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>xs-flex .xs-flex-justify-space-around
This class aligns items in an evenly distributed manner, with equal space around each item on the main axis. Class applies to the parent
<div class="xs-flex xs-flex-justify-space-around xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>Align-items defines how items are aligned along the cross axis. By default, the cross axis direction is top to bottom.
xs-flex .xs-flex-align-start
This aligns flex items at the top, or start, of the cross axis. Class applies to the parent
<div class="xs-flex xs-flex-align-start xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p05 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p2 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>xs-flex .xs-flex-align-end
This aligns flex items at the bottom, or end, of the cross axis. Class applies to the parent
<div class="xs-flex xs-flex-align-end xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p05 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p2 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>xs-flex .xs-flex-align-center
This aligns flex items in the middle of the cross axis. Class applies to the parent
<div class="xs-flex xs-flex-align-center xs-mb3 xs-p1 xs-border fill-red-lighter xs-p2">
<div class="xs-border xs-p05 xs-mr1 fill-yellow-lighter text-gray">item one</div>
<div class="xs-border xs-p1 xs-mr1 fill-yellow-lighter text-gray">item two</div>
<div class="xs-border xs-p2 xs-mr1 fill-yellow-lighter text-gray">item three</div>
</div>By default, all flex items have flex-grow set to 0, which means the items will inherit the width of the content inside of it. Flex grow and shrink allow items to grow or shrink respectively if necessary. Read more about grow and shrink properties here.
xs-flex-grow-1
Setting flex-grow to 1 on a given item allows it to grow if necessary. It takes all the available space inside a flex container that the remaining items do not. Class applies to the child.
<div class="xs-flex xs-mb2">
<div class="xs-p2 xs-border xs-border-right-none fill-yellow-lighter">
<span class="xs-px2"></span>
</div>
<div class="xs-flex-grow-1 xs-p2 xs-border fill-green-lighter">
<span class="xs-px2">.xs-flex-grow-1</span>
</div>
<div class="xs-p2 xs-border xs-border-left-none fill-red-lighter">
<span class="xs-px2"></span>
</div>
</div>Order properties determine how the order of items are laid out despite how they appear in the markup. Assign ordering to items using the classes xs-flex-order-1, .xs-flex-order-2, or .xs-flex-order-3.
<div class="xs-flex">
<div class="xs-flex-order-3 xs-p2 xs-border xs-border-left-none fill-yellow-lighter">
<span>.xs-flex-order-3</span>
<span class="xs-block text-gray-lighter">First item in the markup</span>
</div>
<div class="xs-flex-order-2 xs-p2 xs-border fill-green-lighter">
<span>.xs-flex-order-2</span>
<span class="xs-block text-green">Second item in the markup</span>
</div>
<div class="xs-flex-order-1 xs-p2 xs-border xs-border-right-none fill-red-lighter">
<span>.xs-flex-order-1</span>
<span class="xs-block text-red">Third item in the markup</span>
</div>
</div>This applies to the direction that items are placed along the main axis. Assigning a parent .xs-flex-row means that the children will be distributed left-to-right, and .xs-flex-row-reverse right-to-left respectively.
xs-flex .xs-flex-row
This is the default flex direction, which defines the direction of items as left-to-right. Class applies to the parent.
<div class="xs-flex xs-flex-row">
<div class="xs-flex-grow-1 xs-p2 xs-border xs-border-right-none fill-yellow-lighter">
<span class="xs-block text-gray-lighter">First item in the markup</span>
</div>
<div class="xs-flex-grow-1 xs-p2 xs-border fill-green-lighter">
<span class="xs-block text-green">Second item in the markup</span>
</div>
<div class="xs-flex-grow-1 xs-p2 xs-border xs-border-left-none fill-red-lighter">
<span class="xs-block text-red">Third item in the markup</span>
</div>
</div>xs-flex .xs-flex-row-reverse
This class defines the direction of items as right-to-left. Class applies to the parent.
<div class="xs-flex xs-flex-row-reverse">
<div class="xs-flex-grow-1 xs-p2 xs-border xs-border-left-none fill-yellow-lighter">
<span class="xs-block text-gray-lighter">First item in the markup</span>
</div>
<div class="xs-flex-grow-1 xs-p2 xs-border fill-green-lighter">
<span class="xs-block text-green">Second item in the markup</span>
</div>
<div class="xs-flex-grow-1 xs-p2 xs-border xs-border-right-none fill-red-lighter">
<span class="xs-block text-red">Third item in the markup</span>
</div>
</div>xs-flex .xs-flex-column
This class defines the direction of items as top-to-bottom. Class applies to the parent.
<div class="xs-flex xs-flex-column">
<div class="xs-flex-grow-1 xs-p2 xs-border xs-border-bottom-none fill-yellow-lighter">
<span class="xs-block text-gray-lighter">First item in the markup</span>
</div>
<div class="xs-flex-grow-1 xs-p2 xs-border fill-green-lighter">
<span class="xs-block text-green">Second item in the markup</span>
</div>
</div>xs-flex .xs-flex-column-reverse
This class defines the direction of items as bottom-to-top. Class applies to the parent.
<div class="xs-flex xs-flex-column-reverse">
<div class="xs-flex-grow-1 xs-p2 xs-border xs-border-bottom-none fill-yellow-lighter">
<span class="xs-block text-gray-lighter">First item in the markup</span>
</div>
<div class="xs-flex-grow-1 xs-p2 xs-border fill-green-lighter">
<span class="xs-block text-green">Second item in the markup</span>
</div>
</div>