Flexbox

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

Flex Display

Utilities for creating flex containers.

Class	Property
u-flex	`display: flex`
u-flex-inline	`display: inline-flex`

Flex

Use u-flex to create a block-level flex container:

<div class="u-flex">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Inline Flex

Use u-flex-inline to create an inline flex container:

<div class="u-flex-inline">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Flex Direction

Utilities for controlling the direction of flex items.

Class	Property
u-flex-row	`flex-direction: row` `default`
u-flex-row-reverse	`flex-direction: row-reverse`
u-flex-column	`flex-direction: column`
u-flex-column-reverse	`flex-direction: column-reverse`

Row `default`

Use u-flex-row to position flex items horizontally in the same direction as text:

<div class="u-flex u-flex-row">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Row Reverse

Use u-flex-row-reverse to position flex items horizontally in the opposite direction:

<div class="u-flex u-flex-row-reverse">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Column

Use u-flex-column to position flex items vertically:

<div class="u-flex u-flex-column">
  <div class="u-text-center u-background-notify-warning u-p-small u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-p-small u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-p-small u-m-tiny">3</div>
</div>

Column Reverse

Use u-flex-column-reverse to position flex items vertically in the opposite direction:

<div class="u-flex u-flex-column-reverse">
  <div class="u-text-center u-background-notify-warning u-p-small u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-p-small u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-p-small u-m-tiny">3</div>
</div>

Flex Wrap

Utilities for controlling how flex items wrap.

Class	Property
u-flex-no-wrap	`flex-wrap: nowrap` `default`
u-flex-wrap	`flex-wrap: wrap`
u-flex-wrap-reverse	`flex-wrap: wrap-reverse`

No Wrap `default`

Use u-flex-no-wrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

<div class="u-flex u-flex-no-wrap">
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">3</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">4</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">5</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">6</div>
</div>

Wrap

Use u-flex-wrap to allow flex items to wrap:

<div class="u-flex u-flex-wrap">
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">3</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">4</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">5</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">6</div>
</div>

Wrap Reverse

Use u-flex-wrap-reverse to wrap flex items in the reverse direction:

<div class="u-flex u-flex-wrap-reverse">
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">3</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">4</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">5</div>
  <div class="u-text-center u-background-notify-warning u-ph-huge u-pv u-m-tiny">6</div>
</div>

Align Items

Positioning flex items along a container's cross axis.

Class	Property
u-flex-items-stretch	`align-items: stretch` `default`
u-flex-items-start	`align-items: flex-start`
u-flex-items-center	`align-items: center`
u-flex-items-end	`align-items: flex-end`
u-flex-items-baseline	`align-items: baseline`

Stretch `default`

Use u-flex-items-stretch to stretch items to fill the flex container's cross axis:

<div class="u-flex u-flex-items-stretch">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Start

Use u-flex-items-start to align items to the start of the flex container's cross axis:

<div class="u-flex u-flex-items-start">
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Center

Use u-flex-items-center to align items along the center of the flex container's cross axis:

<div class="u-flex u-flex-items-center">
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">3</div>
</div>

End

Use u-flex-items-end to align items to the end of the flex container's cross axis:

<div class="u-flex u-flex-items-end">
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Baseline

Use u-flex-items-baseline to align items along the flex container's cross axis such that all of their baselines align:

<div class="u-flex u-flex-items-baseline">
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">1</div>
  <div class="u-text-center u-text-h3 u-background-notify-warning u-ph-large u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">3</div>
</div>

Align Self

Positioning a single element along a container's cross axis.

Class	Property
u-flex-self-auto	`align-self: auto` `default`
u-flex-self-start	`align-self: flex-start`
u-flex-self-center	`align-self: center`
u-flex-self-end	`align-self: flex-end`
u-flex-self-stretch	`align-self: stretch`
u-flex-self-baseline	`align-self: baseline`

Auto `default`

Use u-flex-self-auto to align an item based on the value of the flex container's align-items property:

<div class="u-flex u-flex-items-stretch">
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">1</div>
  <div class="u-flex-self-auto u-text-center u-background-notify-danger u-ph-large u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">3</div>
</div>

Start

Use u-flex-self-start to align an item to the start of the flex container's cross axis, despite the container's align-items value:

<div class="u-flex u-flex-items-stretch">
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">1</div>
  <div class="u-flex-self-start u-text-center u-background-notify-danger u-ph-large u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">3</div>
</div>

Center

Use u-flex-self-center to align an item to the center of the flex container's cross axis, despite the container's align-items value:

<div class="u-flex u-flex-items-stretch">
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">1</div>
  <div class="u-flex-self-center u-text-center u-background-notify-danger u-ph-large u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">3</div>
</div>

End

Use u-flex-self-end to align an item to the end of the flex container's cross axis, despite the container's align-items value:

<div class="u-flex u-flex-items-stretch">
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">1</div>
  <div class="u-flex-self-end u-text-center u-background-notify-danger u-ph-large u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">3</div>
</div>

Stretch

Use u-flex-self-stretch to align an item to the end of the flex container's cross axis, despite the container's align-items value:

<div class="u-flex u-flex-items-start">
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">1</div>
  <div class="u-flex-self-stretch u-text-center u-background-notify-danger u-ph-large u-pv u-m-tiny">2</div>
  <div class="u-text-center u-background-notify-warning u-ph-large u-pv u-m-tiny">3</div>
</div>

Justify Content

Positioning flex items along a container's main axis.

Class	Property
u-flex-justify-start	`justify-content: flex-start` `default`
u-flex-justify-center	`justify-content: center`
u-flex-justify-end	`justify-content: flex-end`
u-flex-justify-between	`justify-content: space-between`
u-flex-justify-around	`justify-content: space-around`
u-flex-justify-evenly	`justify-content: space-evenly`

Start `default`

Use u-flex-justify-start to justify items against the start of the flex container's main axis:

<div class="u-flex u-flex-justify-start">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Center

Use u-flex-justify-center to justify items against the center of the flex container's main axis:

<div class="u-flex u-flex-justify-center">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

End

Use u-flex-justify-end to justify items against the end of the flex container's main axis:

<div class="u-flex u-flex-justify-end">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Space Between

Use u-flex-justify-between to justify items along the flex container's main axis such that there is an equal amount of space between each item:

<div class="u-flex u-flex-justify-between">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Space Around

Use u-flex-justify-around to justify items along the flex container's main axis such that there is an equal amount of space around each item:

<div class="u-flex u-flex-justify-around">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Space Evenly

Use u-flex-justify-evenly items are distributed so that the spacing between any two items (and the space to the edges) is equal:

<div class="u-flex u-flex-justify-evenly">
  <div class="u-background-notify-warning u-p u-m-tiny">1</div>
  <div class="u-background-notify-warning u-p u-m-tiny">2</div>
  <div class="u-background-notify-warning u-p u-m-tiny">3</div>
</div>

Flex, Grow and Shrink

Utilities for controlling how flex items grow and shrink.

Class	Property
u-flex-initial	`flex: initial` `default`
u-flex-1	`flex: 1`
u-flex-auto	`flex: auto`
u-flex-none	`flex: none`

Flex Initial `default`

Use u-flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:

<div class="u-flex">
  <div class="u-flex-initial u-background-notify-warning u-p-small u-m-tiny">
    Lorem
  </div>
  <div class="u-flex-initial u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum
  </div>
  <div class="u-flex-initial u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum is simply dummy text
  </div>
</div>

  
    Lorem
    Lorem Ipsum
    Lorem Ipsum is simply dummy text

Flex 1

Use u-flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

<div class="u-flex">
  <div class="u-flex-1 u-background-notify-warning u-p-small u-m-tiny">
    Lorem
  </div>
  <div class="u-flex-1 u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum
  </div>
  <div class="u-flex-1 u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum is simply dummy text
  </div>
</div>

  
    Lorem
    Lorem Ipsum
    Lorem Ipsum is simply dummy text

Flex auto

Use u-flex-auto to allow a flex item to grow and shrink, taking into account its initial size:

<div class="u-flex">
  <div class="u-flex-auto u-background-notify-warning u-p-small u-m-tiny">
    Lorem
  </div>
  <div class="u-flex-auto u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum
  </div>
  <div class="u-flex-auto u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum is simply dummy text
  </div>
</div>

  
    Lorem
    Lorem Ipsum
    Lorem Ipsum is simply dummy text

Flex None

Use u-flex-none to prevent a flex item from growing or shrinking:

<div class="u-flex">
  <div class="u-flex-none u-background-notify-warning u-p-small u-m-tiny">
    Lorem
  </div>
  <div class="u-flex-none u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum
  </div>
  <div class="u-flex-none u-background-notify-warning u-p-small u-m-tiny">
    Lorem Ipsum is simply dummy text
  </div>
</div>

  
    Lorem
    Lorem Ipsum
    Lorem Ipsum is simply dummy text

← No ID's Margin and Padding →

# Flexbox

# Flex Display

# Flex

# Inline Flex

# Flex Direction

# Row default

# Row Reverse

# Column

# Column Reverse

# Flex Wrap

# No Wrap default

# Wrap

# Wrap Reverse

# Align Items

# Stretch default

# Start

# Center

# End

# Baseline

# Align Self

# Auto default

# Start

# Center

# End

# Stretch

# Justify Content

# Start default

# Center

# End

# Space Between

# Space Around

# Space Evenly

# Flex, Grow and Shrink

# Flex Initial default

# Flex 1

# Flex auto

# Flex None

Flexbox

Flex Display

Flex

Inline Flex

Flex Direction

Row `default`

Row Reverse

Column

Column Reverse

Flex Wrap

No Wrap `default`

Wrap

Wrap Reverse

Align Items

Stretch `default`

Start

Center

End

Baseline

Align Self

Auto `default`

Start

Center

End

Stretch

Justify Content

Start `default`

Center

End

Space Between

Space Around

Space Evenly

Flex, Grow and Shrink

Flex Initial `default`

Flex 1

Flex auto

Flex None