CSS flexbox: difference between align-items and align-content [duplicate]

Answer 1

First you need to understand how Flexible box structure works. Below image is part of the Cheatsheet

Flexbox Structure

Flexbox was built to adapt both as a row and column.

Main-axis:

When flex-direction is row: x-axis as on a graph, When flex-direction is column: y-axis on a graph

Cross-axis:

When flex-direction is column: x-axis as on a graph, When flex-direction is row: y-axis on a graph

Justify-Content

justify-content is used to align the items along the main-axis.

.justify-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
  background: lightgray;
  padding: 5px;
}
.box {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Align-content

align-content is used to align the items inside the flexbox along the cross-axis. Note that it applies to Multi-line containers

.align-content {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
  background: lightgray;
  padding: 5px;
}
.box {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}

Align-items

align-items has the same functionality as align-content but the difference is that it works to center every single-line container instead of centering the whole container. Check that in the snippet, the whole container is divided into 250px height each and centered within, while in align-content it is centered within 500px height of the row.

.align-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 500px;
  width: 500px;
  background: lightgray;
  padding: 5px;
}
.box {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}