CSS Flexbox

1
2
3
4
5
6
7
8

Try it yourself

CSS Flexbox Layout Module

Before the Flexbox Layout Module (was released), the available layout modes were the following four:

  • Block (Block), used for parts (sections) of web pages
  • Inline (Inline), used for text
  • Table, used for two-dimensional table data
  • Positioning, used for the explicit position of elements

The Flexible Box Layout Module, which allows for easier design of flexible responsive layout structures without the need for floats or positioning.

Browser support

All modern browsers support flexbox Properties.

29.0 11.0 22.0 10 48

Flexbox elements

To start using the Flexbox model, you need to first define the Flex container.

1
2
3

The above elements represent a flex container with three flex items (blue area).

Example

flex container containing three flex items:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Try it yourself

parent element (container)

By setting the display The property is set to flexThe flex container will be scalable:

1
2
3

Example

.flex-container {
  display: flex;

Try it yourself

The following are flex container properties:

flex-direction Property

flex-direction The property defines in which direction the container should stack flex items.

1
2
3

Example

column The value sets vertical stacking of flex items (from top to bottom):

.flex-container {
  display: flex;
  flex-direction: column;

Try it yourself

Example

column-reverse The value stacks flex items vertically (but from bottom to top):

.flex-container {
  display: flex;
  flex-direction: column-reverse;

Try it yourself

Example

row The value stacks flex items horizontally (from left to right):

.flex-container {
  display: flex;
  flex-direction: row;

Try it yourself

Example

row-reverse The value stacks flex items horizontally (but from right to left):

.flex-container {
  display: flex;
  flex-direction: row-reverse;

Try it yourself

flex-wrap Property

flex-wrap The property specifies whether flex items should be wrapped or not.

The following example includes 12 flex items to better demonstrate the flex-wrap property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Example

wrap The value specifies that flex items will be wrapped when necessary:

.flex-container {
  display: flex;
  flex-wrap: wrap;

Try it yourself

Example

nowrap The value specifies that flex items will not be wrapped (default):

.flex-container {
  display: flex;
  flex-wrap: nowrap;

Try it yourself

Example

wrap-reverse The value specifies that if necessary, the flexible items will be wrapped in the opposite order:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;

Try it yourself

flex-flow Property

flex-flow The property is a shorthand for setting both the flex-direction and flex-wrap properties at the same time.

Example

.flex-container {
  display: flex;
  flex-flow: row wrap;

Try it yourself

justify-content Property

justify-content The property is used for aligning flex items:

1
2
3

Example

center The value aligns flex items at the center of the container:

.flex-container {
  display: flex;
  justify-content: center;

Try it yourself

Example

flex-start The value aligns flex items at the beginning of the container (default):

.flex-container {
  display: flex;
  justify-content: flex-start;

Try it yourself

Example

flex-end The value aligns flex items at the end of the container:

.flex-container {
  display: flex;
  justify-content: flex-end;

Try it yourself

Example

space-around The value shows flex items with spaces before, between, and after the lines:

.flex-container {
  display: flex;
  justify-content: space-around;

Try it yourself

Example

space-between The value shows flex items with spaces between the lines:

.flex-container {
  display: flex;
  justify-content: space-between;

Try it yourself

align-items Property

align-items The property is used for vertical alignment of flex items.

1
2
3

In these examples, we use containers with a height of 200 pixels to better demonstrate the align-items property.

Example

center The value aligns the flex items in the middle of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;

Try it yourself

Example

flex-start The value aligns the flex items at the top of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;

Try it yourself

Example

flex-end The value aligns the flex items at the bottom of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;

Try it yourself

Example

stretch The value stretches the flex items to fill the container (default):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;

Try it yourself

Example

baseline The value aligns the flex items by their baseline:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;

Try it yourself

Note:This example uses different font-sizes to demonstrate that the items are aligned to the text baseline:

1
2
3
4

align-content Property

align-content The property is used to align flex lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

In these examples, we use a container with a height of 600 pixels and set the flex-wrap property to wrap to better demonstrate the align-content property.

Example

space-between The value displays the flex lines with equal spacing between them:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;

Try it yourself

Example

space-around The value displays the flex line with spaces before, between, and after it:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;

Try it yourself

Example

stretch The value stretches the flex line to occupy the remaining space (default):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;

Try it yourself

Example

center The value displays the flex line in the middle of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;

Try it yourself

Example

flex-start The value displays the flex line at the beginning of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;

Try it yourself

Example

flex-end The value displays the flex line at the end of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;

Try it yourself

Perfect centering

In the following example, we will solve a very common styling problem: perfect centering.

Solution: Set justify-content and align-items The properties are set to center, and then the flex items will be perfectly centered:

Example

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;

Try it yourself

Child elements (items)

Direct children of a flex container will automatically become flex items.

1
2
3
4

The above elements represent four blue flex items within a gray flex container.

Example

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Try it yourself

Properties used for elastic items include:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order property

order The property specifies the order of the flex items.

1
2
3
4

The first flex item in the code does not need to be displayed as the first item in the layout.

order The value must be a number, and the default value is 0.

Example

order The property can change the order of the flex items:

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Try it yourself

The flex-grow property

flex-grow The property specifies how much a flex item will grow relative to the other flex items.

1
2
3

This value must be a number, and the default value is 0.

Example

Make the growth rate of the third elastic item eight times faster than the other elastic items:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Try it yourself

The flex-shrink property

flex-shrink The property specifies how much a flex item will shrink relative to the other flex items.

1
2
3
4
5
6
7
8
9

This value must be a number, and the default value is 0.

Example

Do not allow the third elastic item to shrink as much as the other elastic items:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Try it yourself

The flex-basis property

flex-basis The property specifies the initial length of the flex item.

1
2
3
4

Example

Set the initial length of the third elastic item to 200 pixels:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Try it yourself

The flex property

flex This property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

Example

Make the third elastic item unexpandable (0), uncontractible (0), and initially 200 pixels long:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Try it yourself

The align-self property

align-self The property specifies the alignment method of the selected items within an elastic container.

align-self The property will override the default alignment method set by the container's align-items property.

1
2
3
4

In these examples, we use a container that is 200 pixels high to better demonstrate the align-self property:

Example

Align the third flexible item to the center of the container:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Try it yourself

Example

Align the second flexible item to the top of the container, and align the third flexible item to the bottom of the container:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Try it yourself

Responsive Image Gallery Using Flexbox

Use flexbox to create a responsive image gallery that changes between four, two, or full-width images based on the screen size:

Try it yourself

Responsive Websites Using Flexbox

Use flexbox to create responsive websites, including flexible navigation bars and flexible content:

Try it yourself

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

Property Description
display Specifies the box type used for HTML elements.
flex-direction Specifies the direction of flexible items within the flexible container.
justify-content Horizontally align these items when the flexible items do not use all the available space on the main axis.
align-items Vertically align these items when the flexible items do not use all the available space on the main axis.
flex-wrap Specifies whether flexible items should wrap onto another line if there is not enough space on a single flex line to contain them.
align-content Modifies the behavior of the flex-wrap property. Similar to align-items, but it aligns the flex line instead of the flexible items.
flex-flow The shorthand properties of flex-direction and flex-wrap.
order Specifies the order of flexible items relative to the other flexible items within the same container.
align-self Used for flexible items. Overrides the container's align-items property.
flex The shorthand properties of flex-grow, flex-shrink, and flex-basis.