Flexbox

Introducing Flexbox in Solid

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

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
<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

item one
item two
item three
<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

item one
item two
item three
<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

item one
item two
item three
<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

item one
item two
item three
<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

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
<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

item one
item two
item three
<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

item one
item two
item three
<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>

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
<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

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-3 First item in the markup
.xs-flex-order-2 Second item in the markup
.xs-flex-order-1 Third item in the markup
<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>

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
<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.

First item in the markup
Second item in the markup
Third item in the markup
<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.

First item in the markup
Second item in the markup
<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.

First item in the markup
Second item in the markup
<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>