CSS Flexbox

Main axis alignment

We can specify how the browser distributes space between and around our flexible elements along the main-axis with the justify-content property.

start is the default value and packs elements together without any gaps toward the start edge of the alignment container.

end packs elements together without any gaps toward the end edge of the alignment container.

center packs elements together without any gaps toward the center of the alignment container.

space-between spreads the elements evenly within the alignment container and puts equal size gaps between all elements. The first item is flush with the start edge and the last item is flush with the end edge.

space-around spreads the elements evenly within the alignment container and puts equal size gaps between all elements. The first item is spaced half the amount of the other gaps from the start edge and the last item is spaced the same amount from the end edge.

space-evenly spreads the elements evenly within the alignment container and puts equal size gaps between all elements and edges.

Interactive playground

Try out different values of justify-content by clicking on the options below.

Copy
space-evenly

<div class="wrapper">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
</div>

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

.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: #d32f2f;
  flex-basis: 200px;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}