Skip to main content
Version: 1.4.x

Flex

With the grid system based on flex, and the possibility to use the utility class .u-d-f, you are able to manage the layout simply.

Fill and grow​

The option will try to allocate the maximum width available between blocks. For the class, it make the element as wide as possible.

a flex item
a flex item
a flex item
<div class="u-d-f">
  <div>a flex item</div>
  <div>a flex item</div>
  <div>a flex item</div>
</div>
a flex item with more content
a flex item
a flex item
<div class="u-d-f">
  <div class="u-fx-fill">a flex item</div>
  <div class="u-fx-fill">a flex item</div>
  <div class="u-fx-fill">a flex item</div>
</div>
a flex item
a flex item
a flex item
<div class="u-d-f">
  <div class="u-fx-grow">a flex item</div>
  <div>a flex item</div>
  <div>a flex item</div>
</div>
$u-flex: (
  flex: (
    responsive: true,
    property: flex,
    class: fx,
    values: (
      fill: 1 1 auto,
      grow: 1 0 auto,
    ),
  ),
);

Directions​

1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
<div class="u-d-f u-fd-r">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-fd-rr">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-fd-c">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-fd-cr">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>
$u-flex: (
  flex-direction: (
    responsive: true,
    property: flex-direction,
    class: fd,
    values: (
      r: row,
      rr: row-reverse,
      c: column,
      cr: column-reverse,
    ),
  ),
);

Wrap​

1st flex item
2nd flex item
3rd flex item
4th flex item
5th flex item
1st flex item
2nd flex item
3rd flex item
4th flex item
5th flex item
6th flex item
7th flex item
1st flex item
2nd flex item
3rd flex item
4th flex item
5th flex item
6th flex item
7th flex item
<div class="u-d-f u-fw-n">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
  ...
</div>

<div class="u-d-f u-fw-w">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
  ...
</div>

<div class="u-d-f u-fw-wr">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
  ...
</div>
$u-flex: (
  flex-wrap: (
    responsive: true,
    property: flex-wrap,
    class: fw,
    values: (
      n: nowrap,
      w: wrap,
      wr: wrap-reverse,
    ),
  ),
);

Aligments​

For aligning items in a flex container, the utilities classes take the same logic like justify-content or align-items property.

Justify-content​

1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
<div class="u-d-f u-jc-c">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-jc-fs">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-jc-fe">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-jc-sb">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-jc-sa">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-jc-se">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>
$u-flex: (
  justify-content: (
    responsive: true,
    property: justify-content,
    class: jc,
    values: (
      c: center,
      fs: flex-start,
      fe: flex-end,
      sb: space-between,
      sa: space-around,
      se: space-evenly,
    ),
  ),
);

Align-items​

1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
1st flex item
2nd flex item
3rd flex item
<div class="u-d-f u-ai-fs">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-ai-fe">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-ai-c">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-ai-b">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>

<div class="u-d-f u-ai-s">
  <div>1st flex item</div>
  <div>2nd flex item</div>
  <div>3rd flex item</div>
</div>
$u-flex: (
  align-items: (
    responsive: true,
    property: align-items,
    class: ai,
    values: (
      fs: flex-start,
      fe: flex-end,
      c: center,
      b: baseline,
      s: stretch,
    ),
  ),
);

Align-content​

Remember, this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).

a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
<div class="u-d-f u-fw-w u-ac-fs">
  <div>a flex item</div>
  <div>a flex item</div>
  ...
</div>

<div class="u-d-f u-fw-w u-ac-fe">
  <div>a flex item</div>
  <div>a flex item</div>
  ...
</div>

<div class="u-d-f u-fw-w u-ac-c">
  <div>a flex item</div>
  <div>a flex item</div>
  ...
</div>

<div class="u-d-f u-fw-w u-ac-sb">
  <div>a flex item</div>
  <div>a flex item</div>
  ...
</div>

<div class="u-d-f u-fw-w u-ac-sa">
  <div>a flex item</div>
  <div>a flex item</div>
  ...
</div>

<div class="u-d-f u-fw-w u-ac-se">
  <div>a flex item</div>
  <div>a flex item</div>
  ...
</div>

<div class="u-d-f u-fw-w u-ac-s">
  <div>a flex item</div>
  <div>a flex item</div>
  ...
</div>
$u-flex: (
  align-content: (
    responsive: true,
    property: align-content,
    class: ac,
    values: (
      fs: flex-start,
      fe: flex-end,
      c: center,
      sb: space-between,
      sa: space-around,
      se: space-evenly,
      s: stretch,
    ),
  ),
);

Align-self​

The auto option can be usefull if you want to reset the align-self property and follow the parent setting. Because if you use the normal value, it's will override the inherit value.

a flex item
a flex item
a flex item
a flex item
a flex item
a flex item
<div class="u-d-f u-ai-c">
  <div class="u-as-fs">a flex item</div>
  <div class="u-as-c">a flex item</div>
  <div class="u-as-fe">a flex item</div>
  <div class="u-as-b">a flex item</div>
  <div class="u-as-s">a flex item</div>
  <div class="u-as-fs u-as-auto@sm">a flex item</div>
</div>
$u-flex: (
  align-self: (
    responsive: true,
    property: align-self,
    class: as,
    values: (
      auto: auto,
      fs: flex-start,
      fe: flex-end,
      c: center,
      b: baseline,
      s: stretch,
    ),
  ),
);

Order​

The order of items can be set between 0 and 5. There is special classes .u-o-first (to set it -1) and .u-o-last (for the 6). The initial option can reset the default order for an element.

1st flex item
2nd flex item
3rd flex item
<div class="u-d-f">
  <div class="u-o-3">1st flex item</div>
  <div class="u-o-2">2nd flex item</div>
  <div class="u-o-1">3rd flex item</div>
</div>
$u-flex: (
  order: (
    responsive: true,
    property: order,
    class: o,
    values: (
      i: initial,
      first: -1,
      0: 0,
      1: 1,
      2: 2,
      3: 3,
      4: 4,
      5: 5,
      last: 6,
    ),
  ),
);