Flex

Set an item’s flexbox properties.

Utility Modules

Flex

Sets how a flex item will grow or shrink to fit the space available in its flex container.

Mixins and Functions

Utility	Mixin	Example
.flex-`flex`	u-flex(`flex`)	@include u-flex('fill')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
flex	False	None	0.06 KB	0.33 KB

.flex-1

.flex-2

.flex-3

.flex-4

.flex-5

.flex-6

.flex-7

.flex-8

.flex-9

.flex-10

.flex-11

.flex-12

.flex-auto

.flex-full

<div class="grid-row">
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-2"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-3"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-4"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-5"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-6"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-7"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-8"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-9"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-10"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-11"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-12"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-auto"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row">
  <div class="grid-col flex-full"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>

Flex direction

Sets how flex items are placed in the flex container defining the main axis and the direction.

Mixins and Functions

Utility	Mixin	Example
.flex-`direction`	u-flex(`direction`)	@include u-flex('row')@include u-flex('column')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
flex-direction	False	None	0.02 KB	0.1 KB

.flex-column

.flex-row

<div class="grid-row flex-column">
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>
<div class="grid-row flex-row">
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
  <div class="grid-col flex-1"></div>
</div>

Flex wrap

Sets whether flex items are forced onto one line or can wrap onto multiple lines.

Mixins and Functions

Utility	Mixin	Example
.flex-`wrap`	u-flex(`wrap`)	@include u-flex('wrap')@include u-flex('no-wrap')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
flex-wrap	False	None	0.02 KB	0.1 KB

.flex-wrap

.grid-col-4

.flex-no-wrap

.grid-col-4

<div class="grid-row flex-wrap">
  <div class="grid-col-4"></div>
  <div class="grid-col-4"></div>
  <div class="grid-col-4"></div>
  <div class="grid-col-4"></div>
</div>
<div class="grid-row flex-no-wrap">
  <div class="grid-col-4"></div>
  <div class="grid-col-4"></div>
  <div class="grid-col-4"></div>
  <div class="grid-col-4"></div>
</div>

Flex align

Controls the alignment of flex items on the cross axis.

Mixins and Functions

Utility	Mixin	Example
.flex-align-`value`	u-flex('align-`value`')	@include u-flex('align-center')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
align-items	False	None	0.04 KB	0.24 KB

.flex-column

.flex-align-start

.flex-align-center

.flex-align-end

.flex-align-stretch

.flex-row

.flex-align-start

.flex-align-center

.flex-align-end

.flex-align-stretch

<div class="grid-row flex-column flex-align-start">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-column flex-align-center">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-column flex-align-end">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-column flex-align-stretch">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-row flex-align-start">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-row flex-align-center">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-row flex-align-end">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-row flex-align-stretch">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>

Flex align self

Mixins and Functions

Utility	Mixin	Example
.flex-align-self-`value`	u-flex('align-self-`value`')	@include u-flex('align-self-center')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
align-self	False	None	0.06 KB	0.31 KB

.flex-column

.flex-align-self-start

.flex-align-self-center

.flex-align-self-end

.flex-align-self-stretch

.flex-row

.flex-align-self-start

.flex-align-self-center

.flex-align-self-end

.flex-align-self-stretch

<div class="grid-row flex-column">
  <div class="flex-1 flex-align-self-start display-flex"></div>
  <div class="flex-1 flex-align-self-center display-flex"></div>
  <div class="flex-1 flex-align-self-end display-flex"></div>
  <div class="flex-1 flex-align-self-stretch display-flex"></div>
</div>
<div class="grid-row flex-row">
  <div class="flex-1 flex-align-self-start display-flex"></div>
  <div class="flex-1 flex-align-self-center display-flex"></div>
  <div class="flex-1 flex-align-self-end display-flex"></div>
  <div class="flex-1 flex-align-self-stretch display-flex"></div>
</div>

Flex justify

Defines how the browser distributes the space between and around content items along the main axis of a flex container.

Mixins and Functions

Utility	Mixin	Example
.flex-`justify-option`	u-flex(`justify-option`)	@include u-flex('justify')@include u-flex('justify-start')@include u-flex('justify-center')@include u-flex('justify-end')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
justify-content	False	None	0.18 KB	0.95 KB

.flex-column

.flex-justify

.flex-justify-start

.flex-justify-center

.flex-justify-end

<div class="grid-row flex-justify">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-justify-start">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-justify-center">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>
<div class="grid-row flex-justify-end">
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
  <div class="grid-auto"></div>
</div>

Order

Sets the order to lay out an item in a flex container. Items in a container are sorted by ascending order value and then by their source order.

Mixins and Functions

Utility	Mixin	Example
.order-`order`	u-order(`order`)	@include u-order('last')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
order	True	None	0.26 KB	1.4 KB

intital: 1.order-11

intital: 2.order-10

intital: 3.order-9

intital: 4.order-8

intital: 5.order-7

intital: 6.order-6

intital: 7.order-5

intital: 8.order-4

intital: 9.order-3

intital: 10.order-2

intital: 11.order-1

intital: 12.order-0

intital: 13.order-initial

intital: 14.order-last

intital: 15.order-first

<div class="grid-row grid-gap-sm">
  <div class="grid-col-auto order-11"></div>
  <div class="grid-col-auto order-10"></div>
  <div class="grid-col-auto order-9"></div>
  <div class="grid-col-auto order-8"></div>
  <div class="grid-col-auto order-7"></div>
  <div class="grid-col-auto order-6"></div>
  <div class="grid-col-auto order-5"></div>
  <div class="grid-col-auto order-4"></div>
  <div class="grid-col-auto order-3"></div>
  <div class="grid-col-auto order-2"></div>
  <div class="grid-col-auto order-1"></div>
  <div class="grid-col-auto order-0"></div>
  <div class="grid-col-auto order-initial"></div>
  <div class="grid-col-auto order-last"></div>
  <div class="grid-col-auto order-first"></div>
</div>