THE WORLD'S LARGEST WEB DEVELOPER SITE

CSS Flexible Box Layout Module


1

2

3

4

5

6

7

8

Try it Yourself »


Flexbox Layout

Before the Flexible Box Layout Module, there were four layout modes:

  • Block, for sections in a webpage.
  • Inline, for text.
  • Table, for two-dimensional table data.
  • Positioned, for explicit position of an element.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without having to use floats or positioning.


Flexbox Elements

A flexbox layout consists of a parent element, with one or more child elements.

1

2

3

The element above represents a container (the blue area) with three items.

Example

A container with three items:

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

Try it Yourself »


Parent Element (Container)

The parent element becomes flexible by setting the display property to flex:

Example

.flex-container {
  display: flex;
}

Flexbox properties for the parent element:



The flex-direction Property

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

1

2

3

Example

Use the column value to stack the items in a column from top to bottom:

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

Try it Yourself »

Example

Use the column-reverse value to stack the items in a column from bottom to top:

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

Try it Yourself »

Example

Use the row value to stack the items in a row from left to right:

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

Try it Yourself »

Example

Use the row-reverse value to stack the items in a row from right to left:

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

Try it Yourself »


The flex-wrap Property

The flex-wrap property defines if, and how, the container wants its children to wrap.

The examples below have 12 items, to better demonstrate the flex-wrap property.

1

2

3

4

5

6

7

8

9

10

11

12

Example

Use the wrap value to display items in multiple rows:

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

Try it Yourself »

Example

Use the nowrap value to display all items in one row:

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

Try it Yourself »

Example

Use the wrap-reverse value to display items in multiple rows, starting from the bottom:

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

Try it Yourself »


The flex-flow Property

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

Example

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

Try it Yourself »


The justify-content Property

The justify-content property aligns the items:

1

2

3

Example

Use center to align the items in the center of the container:

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

Try it Yourself »

Example

Use flex-start to align the items at the beginning of the container:

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

Try it Yourself »

Example

Use flex-end to align the items at the end of the container:

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

Try it Yourself »

Example

Use space-around to display the items with equal spacing around them:

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

Try it Yourself »

Example

Use space-between to display the items with equal spacing between them:

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

Try it Yourself »


The align-items Property

The align-items property aligns the items vertically (the opposite axis of the justify-content property).

1

2

3

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

Use center to center align the items:

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

Try it Yourself »

Example

Use flex-start to align the items at the start of the container:

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

Try it Yourself »

Example

Use flex-end to align the items at the end of the container:

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

Try it Yourself »

Example

Use stretch to stretch the items from the start to the end of the container:

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

Try it Yourself »

Example

Use baseline to align the items by their baseline:

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

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:


1

2

3

4

Try it Yourself »


The align-content Property

The align-content property aligns the item rows.

1

2

3

4

5

6

7

8

9

10

11

12

The examples below have a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Example

Use space-between to display the rows with equal spacing between them:

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

Try it Yourself »

Example

Use space-around to display the rows with equal spacing around them:

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

Try it Yourself »

Example

Use stretch to display the items stretched in the entire row:

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

Try it Yourself »

Example

Use center to display the rows in the middle of the container:

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

Try it Yourself »

Example

Use flex-start to display the rows at the beginning of the container:

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

Try it Yourself »

Example

Use flex-end to display the rows 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 an almost daily problem: perfect centering.

Set both the justify-content and align-items properties to center, and the item will be perfectly centered in both axis:

Example

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

Try it Yourself »


Child Elements (Items)

The direct child element(s) of a flexible container automatically becomes flexible items.

1

2

3

4

The element above represents four blue flexible items inside a grey flexible container.

Example

The direct children of a flexible container becomes flexible items:

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

Try it Yourself »

Flexbox properties for the child elements:


The order Property

The order property sorts the items in the specified order.

1

2

3

4

The first item in the HTML code does not have to appear as the first item in the layout.

The value must be a number, default value is 0.

Example

Use the order property to change the order of the flexible 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

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

1

2

3

The value must be a number, default value is 0.

Example

Make the third item grow eight times faster than the rest:

<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

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

1

2

3

4

5

6

7

8

9

10

The value must be a number, default value is 1.

Example

Do not let the third item shrink as easy as the rest:

<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

The flex-basis property specifies the width of a flex item.

1

2

3

4

Example

Specify the width of the third item:

<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

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

Example

Make the third element not growable, not shrinkable, and preferably 200px wide:

<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

The align-self property overrides the default alignment set by the container's align-items property.

1

2

3

4

The container in these examples has a 200 pixels height, to better demonstrate the align-self property:

Example

Align the third item in the middle:

<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 item at the beginning, and the third item at the end 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 »


Browser Support

The flexbox properties are supported in all modern browsers.

29.0 11.0 22.0 10 48

CSS3 Flexbox Properties

The following table lists the CSS properties used with flexbox:

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container's align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container