These flexbox-based utilities can replace the need for a grid system in many instances, and provide powerful constraint-based micro-layout solutions.
To learn more about the flexbox module, see Using CSS flexible boxes and the CSS Flexible Box Layout Module Specification.

To set a container to display flex, add the .flex class.

``html



`

To set a container to display flex at certain breakpoints, use the .sm-flex, .md-flex, and .lg-flex styles.

`html


Hamburger

Hot Dog

Hamburger

Hot Dog

`

To set a flexbox container to column direction, use .flex-column.

`html



`

To enable wrapping of flexbox containers, use .flex-wrap.

`html



`

To set a flexbox item to automatically fill the available space, use the flex-auto utility.

`html



`

To prevent a flexbox item from growing or shrinking, use the flex-none utility.

`html



`

To control alignment of flexbox items, use the align-items utilities. These styles uses a shorthand naming convention. items for the align-items property and start and end for the flex-start and flex-end values.

`html


Hamburger

Hot Dog

Hamburger

Hot Dog

Hamburger

Hot Dog

Hamburger

Hot Dog

`

To align flexbox items on an item-by-item basis, use the align-self utilities. These override values set by the align-items property. A shorthand naming convention of self for the align-self property is used.

`html


Hamburger

Hot Dog

Hamburger

Hot Dog

Hamburger

Hot Dog

Hamburger

Hot Dog

`

To control the spacing for items on the main axis, use the justify-content utilities. These styles use a shorthand naming convention. justify for the justify-content property and around and between for the space-around and space-between values.

`html


Hamburger

Hot Dog

Hamburger

Hot Dog

Hamburger

Hot Dog

Hamburger

Hot Dog

`

To align items along the cross-axis, use the align-content utilities. A shorthand naming convention content is used for the align-content property.

`html



`

`html



`

`html



`

`html



`

`html



`

`html



`

To change the order of flexbox items, use the order utilities.

`html



``