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!
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
item one
item two
item three
.xs-flex .xs-flex-justify-end
This class aligns items at the end of the main axis. Class applies to the parent
item one
item two
item three
.xs-flex .xs-flex-justify-center
This class aligns items in the center of the main axis. Class applies to the parent
item one
item two
item three
.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
item one
item two
item three
.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
item one
item two
item three
Align Items
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
item one
item two
item three
.xs-flex .xs-flex-align-end
This aligns flex items at the bottom, or end, of the cross axis. Class applies to the parent
item one
item two
item three
.xs-flex .xs-flex-align-center
This aligns flex items in the middle of the cross axis. Class applies to the parent
item one
item two
item three
Grow & Shrink
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.
.xs-flex-grow-1
Order Properties
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.
.xs-flex-order-3First item in the markup
.xs-flex-order-2Second item in the markup
.xs-flex-order-1Third item in the markup
Direction
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.
First item in the markup
Second item in the markup
Third item in the markup
.xs-flex .xs-flex-row-reverse
This class defines the direction of items as right-to-left. Class applies to the parent.
First item in the markup
Second item in the markup
Third item in the markup
.xs-flex .xs-flex-column
This class defines the direction of items as top-to-bottom. Class applies to the parent.
First item in the markup
Second item in the markup
.xs-flex .xs-flex-column-reverse
This class defines the direction of items as bottom-to-top. Class applies to the parent.