Dofactory.com
Login Sign up
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Feedback
Guides


On this page