Flexbox Alignment

Flexbox provides very precise control for aligning flex items. Here's an overview.

Alignment is a large part of flexbox. Aside from the usual CSS alignment properties, there are some alignment properties that were designed specifically for flexbox and grid.

However, as the flexbox specification progressed, it became clear that various alignment properties that were being developed specifically for flexbox, could also be applied to other box models. So a new CSS module was created to deal specifically with alignment of boxes within their containers when using block layout, table layout, flex layout, and grid layout.

Here are the main properties that deal with flexbox in that specification.

The `align-items` Property

The align-items property specifies the default align-self value for all the flex items participating in the flex container's formatting context.

<!doctype html>
<title>Example</title>
<style>
  .wrapper {
    display: flex;
    align-items: center;
    background-color: beige;
    height: 100vh;
  }
  .wrapper > div {
    padding: 20px;
    font-size: 4vw;
    color: white;
  }
  .red {
    background: orangered;
  }
  .green {
    background: yellowgreen;
  }
  .blue {
    background: steelblue;
  }
  body {
    margin: 0;
  }
</style>

<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

In this example, we apply align-items: center to the flex container, therefore all flex items are aligned to the center of the block axis.

But because this is a default setting, any of the flex items could override this with the align-self property.

The `align-self` Property

The align-self property aligns a box within its containing block along the block/column/cross axis.

<!doctype html>
<title>Example</title>
<style>
  .wrapper {
    display: flex;
    align-items: center;
    background-color: beige;
    height: 100vh;
  }
  .wrapper > div {
    padding: 20px;
    font-size: 4vw;
    color: white;
  }
  .red {
    background: orangered;
    align-self: flex-start;
  }
  .green {
    background: yellowgreen;
  }
  .blue {
    background: steelblue;
    align-self: flex-end;
  }
  body {
    margin: 0;
  }
</style>

<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Here, the red flex item has a value of flex-start, and the blue item has a value of flex-end. This moves the red item to the start and the blue item to the end.

However, we haven't set a value for the green item. Therefore it uses the default value, which in this case, is set to center by the align-items on the flex container.

The `justify-content` Property

The justify-content property aligns the flex container's contents as a whole along the main/inline axis.

In this example we use space-between, which results in an even space between each item, with each of the end ones lined up against its respective edge.

<!doctype html>
<title>Example</title>
<style>
  .wrapper {
    display: flex;
    justify-content: space-between;
    background-color: beige;
    height: 100vh;
  }
  .wrapper > div {
    padding: 20px;
    font-size: 4vw;
    color: white;
  }
  .red {
    background: orangered;
  }
  .green {
    background: yellowgreen;
  }
  .blue {
    background: steelblue;
  }
  body {
    margin: 0;
  }
</style>

<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The `align-content` Property

The align-content property is the same as justify-content, except that this property aligns along the cross/block axis.

<!doctype html>
<title>Example</title>
<style>
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    background-color: beige;
    height: 100vh;
  }
  .wrapper > div {
    padding: 10px;
    width: 60%;
    font-size: 4vw;
    color: white;
  }
  .red {
    background: orangered;
  }
  .green {
    background: yellowgreen;
  }
  .blue {
    background: steelblue;
  }
  body {
    margin: 0;
  }
</style>

<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The `place-content` Property

The place-content property is shorthand for justify-content and align-content.

<!doctype html>
<title>Example</title>
<style>
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    place-content: space-between center;
    background-color: beige;
    height: 100vh;
  }
  .wrapper > div {
    padding: 10px;
    width: 60%;
    font-size: 4vw;
    color: white;
  }
  .red {
    background: orangered;
  }
  .green {
    background: yellowgreen;
  }
  .blue {
    background: steelblue;
  }
  body {
    margin: 0;
  }
</style>

<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Margins

You can still apply margins to flex items. Here's an example of applying margin: auto to a flex item even after it's been aligned with other alignment properties.

<!doctype html>
<title>Example</title>
<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: beige;
    height: 100vh;
  }
  .wrapper > div {
    padding: 20px;
    font-size: 4vw;
    color: white;
  }
  .red {
    background: orangered;
    align-self: flex-start;
    margin: auto;
  }
  .green {
    background: yellowgreen;
  }
  .blue {
    background: steelblue;
    align-self: flex-end;
  }
  body {
    margin: 0;
  }
</style>

<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Flexbox Alignment

The align-items Property

The align-self Property

The justify-content Property