Flexbox

Utilities for controlling the flex properties of an element.

Class Name	CSS Equivalent
flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

Flex-1

The .flex-1 class sets an element's flex property to 1 1 0%. This means the element will grow and shrink at the same rate as other flex items, but its base size is 0%.

<div class="flex-1">
  <!-- Flex-1 content here -->
</div>

1

2

3

Flex-auto

The .flex-auto class sets an element's flex property to 1 1 auto. This means the element will grow and shrink at the same rate as other flex items, but its base size is determined by its width or height (if set), or its content.

<div class="flex-auto">
  <!-- Flex-auto content here -->
</div>

Flex-initial

The .flex-initial class sets an element's flex property to 0 1 auto. This means the element will not grow to fill unused space, but will shrink to its auto size to fit the container.

<div class="flex-initial">
  <!-- Flex-initial content here -->
</div>

Flex-none

The .flex-none class sets an element’s flex property to none. This means the element will neither grow nor shrink. Its size is based on its width and height attributes.

<div class="flex-none">
  <!-- Flex-none content here -->
</div>