CSS Flexbox Alignments

Flexbox is a layout system that arranges items in rows and columns.

Flexbox items are packed into a flex container either by row or by column.

Aligment options specify how items occupy the available container space.

Example

#

These flexbox items are horizontally centered in the available space.

1
2
3
<style>
  .flex-align {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    justify-content: center;
  }

  .flex-align > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

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

The justify-content property

The justify-content property horizontally aligns flex items in a container.

Options include: flex-start (the default), flex-end, center, space-between, and space-around.

justify-content: flex-start

Flex items that are packed from the start (the left side).

1
2
3
<style>
  .flex-justify-start {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    justify-content: flex-start;
  }

  .flex-justify-start > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

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

justify-content: flex-end

Flex items that are packed from the end (the right side).

1
2
3
<style>
  .flex-justify-end {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    justify-content: flex-end;
  }

  .flex-justify-end > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

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

justify-content: center

Flex items that are packed in the center.

1
2
3
<style>
  .flex-justify-center {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    justify-content: center;
  }

  .flex-justify-center > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

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

justify-content: space-between

Flex items that are justified with space between.

1
2
3
<style>
  .flex-justify-between {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    justify-content: space-between;
  }

  .flex-justify-between > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

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

justify-content: space-around

Flex items that are justified with equal space around.

1
2
3
<style>
  .flex-justify-around {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    justify-content: space-around;
  }

  .flex-justify-around > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

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

For details on justify-content, see our CSS justify-content Property Reference.


The align-items property

The align-items property aligns items vertically inside the container.

Options include: stretch (the default), flex-start, flex-end, center, and baseline.

align-items: stretch

Items are stretched vertically to fill the container.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-items-stretch {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .flex-align-items-stretch > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-items-stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-items: flex-start

A flexbox that aligns flex items vertically starting at the top.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-items-start {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .flex-align-items-start > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-items-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-items: flex-end

A flexbox that aligns flex items vertically starting at the bottom.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-items-end {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .flex-align-items-end > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-items-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-items: center

A flexbox that aligns flex items vertically around at the center.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-items-center {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .flex-align-items-center > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-items-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-items: baseline

A flexbox that aligns flex items vertically along their baselines. This alignment attempts to align text content at the same line.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-items-baseline {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .flex-align-items-baseline > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-items-baseline">
  <div>1</div>
  <div style="font-size:35px;padding-top:30px;">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

For details on align-items, see our CSS align-items Property Reference.


The align-content property

The align-content property align items along flex lines.

Options include: stretch, flex-start, flex-end, center, and baseline.

This property requires that the container allows wrapping.

align-content: stretch

A flexbox that stretches items to take up all vertical space.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-content-stretch {
    background-color: #776fac;
    padding: 5px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
  }

  .flex-align-content-stretch > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-content-stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-content: flex-start

A flexbox that packs items along the top.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-content-start {
    background-color: #776fac;
    padding: 5px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .flex-align-content-start > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-content-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-content: flex-end

A flexbox that packs items along the bottom.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-content-end {
    background-color: #776fac;
    padding: 5px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
  }

  .flex-align-content-end > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-content-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-content: center

A flexbox that packs items in the middle.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-content-center {
    background-color: #776fac;
    padding: 5px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }

  .flex-align-content-center > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-content-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-content: space-between

A flexbox with space between the rows.
Resize browser and see how rows are spaced.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-content-space-between {
    background-color: #776fac;
    padding: 5px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }

  .flex-align-content-space-between > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-content-space-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

align-content: space-around

A container with spacing around the rows.
Resize browser and see how rows are spaced.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-content-space-around {
    background-color: #776fac;
    padding: 5px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }

  .flex-align-content-space-around > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-content-space-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

For details on align-content, see our CSS align-content Property Reference.


The align-self property

The align-self property aligns an item in a flex container.

This property overides the container‘s align-items value.

Options include: stretch, flex-start, flex-end, center, and baseline.

Item 2 is aligned to the bottom of the first row.

1
2
3
4
5
6
7
8
9
<style>
  .flex-align-self {
    background-color: #776fac;
    padding: 5px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .flex-align-self > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-align-self">
  <div>1</div>
  <div style="align-self:flex-end;">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

For details on align-self, see our CSS align-self Property Reference.


Did you know?

Did you know?

Perfectly centering elements

Centering elements in the perfect center, horizontally and vertically, can be done in many ways. A flexbox makes this easy.

A perfectly centered flex item inside a flex container. Resizing the browser will keep the item centered.

Perfect center
<style>
  .flex-perfect-centering {
    background-color: aliceblue;
    xwidth: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flex-perfect-centering > div {
    background-color: #776fac;
    color: white;
    width: 180px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-perfect-centering">
  <div>Perfect center</div>
</div>

Flexbox Properties

A list of all flexbox properties for flexbox.

Property Description
display Specifies the type of display flow for the element
flex-wrap Specifies whether to wrap flex items when they run out of space
flex-direction Specifies the direction of the items in a flex container
flex-flow Shorthand for flex-direction and flex-wrap
gap Space between rows and columns.
row-gap Space between rows.
column-gap Space between columns.
justify-content Horizontally aligns items when they do not use all available space
align-items Vertically aligns the flex items when they don't use all available space
align-content Specifies that, instead of aligning flex items, it aligns flex lines
order Specifies the order of an item relative to the other items.
align-self Used on flex items. Overrides the container's align-items setting
flex-basis Specifies the initial width (the basis) of an item.
flex-grow Specifies how an item stretches (grows) in the flex container
flex-shrink Specifies how an item contracts (shrinks) in the flex container
flex Shorthand for flex-grow, flex-shrink, and flex-basis

Browser Support of Flexbox

This table shows when flexbox support started for each browser.

Chrome
29.0 Aug 2013
Firefox
28.0 Mar 2014
IE/Edge
11.0 Oct 2013
Opera
17.0 Aug 2013
Safari
9.0 Sep 2015

You may also like

Guides