The align-items property in flex-box is used to align the items within a flex container along the cross axis, similar to how justify-content aligns them along the main axis. (When the default flex-direction: row is set, the cross axis is vertical and the main axis is horizontal. When flex-direction: column is used, these axes are swapped).

Here is an example of how align-items:center appears:

https://i.sstatic.net/Wcfm5.png

On the other hand, align-content is meant for multi-line flexible boxes, with no effect on single line layouts. It aligns the entire structure based on its specified value. Below is an example demonstrating align-content: space-around;: https://i.sstatic.net/OHTV1.png

Additionally, here is how align-content: space-around; combined with align-items:center appears: https://i.sstatic.net/qX3as.png

Notice how the third box and all others in the first line align vertically centered within that line.

You can experiment further with these concepts using the following codepen links:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Check out this amazing pen that allows you to explore various aspects of flexbox styling.

Using the example found on flexboxfroggy.com:

Solving the challenge will require 10-20 minutes of your time, and once you reach level 21, the solution to your inquiry will be revealed.

align-content controls the spacing between lines.

align-items dictates how all items are aligned within the container as a whole.

If there is only one line, align-content does not have an impact.

Initially, when it comes to align-items, the focus is on aligning items within a single row. This means that for a row of elements along the main axis, align-items will arrange these items relative to each other while starting fresh with each new row.

On the other hand, align-content addresses the alignment of rows themselves rather than individual items in a row. As a result, align-content aims to align rows in relation to each other and the flex container.

For a demonstration, feel free to visit this fiddle: https://jsfiddle.net/htym5zkn/8/

Initially, I shared the same confusion as many others. However, after experimenting with various suggestions provided above, I was able to grasp the distinctions more clearly. In my view, the best way to illustrate this difference is through a flex container that meets the following criteria:

1. The flex container itself has a height restriction (e.g., min-height: 60rem), potentially making it taller than its content.
2. The child items within the container have varying heights.

Criterion 1 aided me in comprehending the concept of content concerning its parent container. When the content aligns perfectly with the container, any alignment effects from align-content will not be noticeable. It's only when there is additional space along the cross-axis that these effects become apparent: aligning the content relative to the boundaries of the parent container.

Criterion 2 helped me visualize how align-items operates: aligning items in relation to each other.

Below is an illustrative code example sourced from Wes Bos' CSS Grid tutorial (Lesson 21: Flexbox vs. CSS Grid).

• Example HTML:

<div class="flex-container">
  <div class="item">Short</div>
  <div class="item">Longerrrrrrrrrrrrrr</div>
  <div class="item">💩</div>
  <div class="item" id="tall">This is Many Words</div>
  <div class="item">Lorem, ipsum.</div>
  <div class="item">10</div>
  <div class="item">Snickers</div>
  <div class="item">Wes Is Cool</div>
  <div class="item">Short</div>
</div>

• Example CSS:

.flex-container {
  display: flex;
  /* dictates a min-height */
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
}

#tall {
  /* intentionally tall */
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Example Scenario 1: If we reduce the viewport size so that the content fits snugly inside the container, the effect of align-content: flex-start; is negligible as there is no spare room for repositioning.

Observe the second row where the items are centered with respect to each other.

In https://i.sstatic.net/0bfVR.png

Example Scenario 2: Expanding the viewport reveals that the content does not fill the entire container. This showcases the impact of align-content: flex-start; by aligning the content relative to the top edge of the container. In https://i.sstatic.net/22Vtj.png

While these examples are rooted in flexbox, the same principles can be applied to CSS grid layouts. Hopefully, this explanation clarifies the concepts for you :)

Both align-items and align-content have their effect on the cross-axis.

For instance, when flex-direction is set to row, the main axis runs from Left to Right. Conversely, if flex-direction is set to column, the main axis goes from top to bottom.

Therefore, in the upcoming examples, we will assume that flex-direction is row, indicating that the main axis goes from Left to Right and the cross-axis goes from top to bottom.

align-content only functions when flex-wrap: wrap is in place and there are multiple flex-lines within the container.

If there are numerous flex lines, align-content takes precedence over align-items.

What exactly is a flex-line?

A flex line in a flex container refers to each row or column of flex items. Multiple lines occur when there isn't enough space in a container, causing flex-items to move to the next line (for flex-direction: row;), or adding flex items to the next line (for flex-direction: column).

example

By default, flex is a flexible container capable of accommodating any number of elements unless specified otherwise with flex-wrap: wrap. Without wrapping, flex-items would overflow the container (in the case of flex-direction: row).

Example showcasing align-content

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

<div class="container">
  <div class="box box1">box 1</div>
  <div class="box box2">box 2</div>
  <div class="box box3">box 3</div>
  <div class="box box4">box 4</div>
  <div class="box box5">box 5</div>
</div>

In the above example, if flex-wrap: no-wrap had been used, then align-content would not impact the layout.

Example demonstrating align-items

The align-items property specifies how flex items are placed within a flex line, along the cross-axis.

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

<div class="container">
  <div class="box box1">box 1</div>
  <div class="box box2">box 2</div>
  <div class="box box3">box 3</div>
  <div class="box box4">box 4</div>
  <div class="box box5">box 5</div>
</div>

If both align-content and align-items are applied on a container with flex-wrap: wrap and there are multiple flex lines, then align-content takes precedence over align-items.

Priority scenario between align-content and align-items

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: flex-start;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

<div class="container">
  <div class="box box1">box 1</div>
  <div class="box box2">box 2</div>
  <div class="box box3">box 3</div>
  <div class="box box4">box 4</div>
  <div class="box box5">box 5</div>
</div>

After thorough inspection using my web browser, I have come to some interesting conclusions.

In the world of CSS, align-content plays a crucial role in adjusting the height of a line for row direction or width for columns based on its value - whether it's stretch, space-between, space-around, flex-start, or flex-end. It can also add empty space between or around the lines.

On the other hand, align-items is responsible for changing the height or position of items within a line's area. When items are not wrapped and only occupy a single line, their area will always stretch to fit the flex-box area, rendering align-content ineffective in this scenario. In such cases, only align-items can manipulate the positioning or stretching of items on that singular line.

However, if the items are wrapped, creating multiple lines with various items within each line, the effects become more noticeable. If all items within a line have the same height (in row direction), changing the value of align-items may not be visibly impactful since the line's height matches that of the items themselves.

Therefore, when aiming to influence items with align-items while they are wrapped and share the same height (in row direction), one must first utilize align-content with the stretch value to expand the lines' area accordingly.

After reviewing some of the responses, it is clear that align-content has no effect unless the flex content is wrapped. However, what may be overlooked is the significant role that align-items plays when there is wrapped content:

In the scenarios below, align-items is utilized to centrally position the items within each row, followed by adjustments to align-content to observe its impact.

Scenario 1:

align-content: flex-start;

https://i.sstatic.net/EPM6n.png

Scenario 2:

align-content: flex-end;

https://i.sstatic.net/bNREJ.png

Here is the code snippet:

<div class="container">
    <div class="child" style="height: 30px;">1</div>
    <div class="child" style="height: 50px;">2</div>
    <div class="child" style="height: 60px;">3</div>
    <div class="child" style="height: 40px;">4</div>
    <div class="child" style="height: 50px;">5</div>
    <div class="child" style="height: 20px;">6</div>
    <div class="child" style="height: 90px;">7</div>
    <div class="child" style="height: 50px;">8</div>
    <div class="child" style="height: 30px;">9</div>
    <div class="child" style="height: 40px;">10</div>
    <div class="child" style="height: 30px;">11</div>
    <div class="child" style="height: 60px;">12</div>
</div>

<style>
.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}
</style>

Adjusting Alignment with Flexbox

align-content in flexbox allows you to control the vertical positioning of multiple lines, depending on whether your flex-direction is set to a row or column.

(Imagine how lines in a paragraph can be spread out vertically, stacked at either end, or arranged in a different way under a row-oriented layout).

Customizing Individual Line Alignments

align-items focuses on aligning individual lines of elements within the flex container.

(Consider how each line in a paragraph could be aligned differently, especially when there are varying text sizes like ordinary text mixed with equations - this property helps decide if these elements should be aligned at the top, center, or bottom of each line).

The crucial attribute to focus on is flex-wrap. In the case of nowrap (or when there is no additional room in the perpendicular axis), align-content has no impact whatsoever. However, if wrap or wrap-reverse is applied, it will always have an effect (irrespective of the number of lines) as long as there is extra space in the perpendicular axis.

Examine these four containers:

https://i.sstatic.net/AaWdE.png

align-items vertically distributes the child elements with equal spacing between them.

align-content groups them closely together to appear as a single unit.

(when the flex-direction is set to column)

My key takeaways from exploring this blog

Understanding the concepts of main axis and cross axis

• Main axis pertains to horizontal rows, while cross axis relates to vertical columns in flex-direction: row
• Main axis represents vertical columns, whereas cross axis represents horizontal rows in flex-direction: column

Delving into align-content and align-items

align-content is utilized for rows within a container that contains multiple rows Key properties of align-content:

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items focuses on aligning items within a row Key properties of align-items:

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

For further information, visit this page

When using align-items, the content will be centered as a single line of text both horizontally and vertically within the container. On the other hand, when using align-content, it will act as if there are multiple lines of text or a paragraph, starting from the top and aligning even a single line of text as though it were part of a centered paragraph.

https://i.sstatic.net/O2c1z.png

This is the outcome produced by applying

align-content:center;

Initial Section

align-items is specifically for a single row of boxes. When there are 4 boxes lined up in a row within a container, align-items will align them within that row. If the flex-direction is set to row (the default), align-items will arrange the boxes vertically; if it's set to column, the boxes will be arranged horizontally.

Subsequent Section

Expanding on the concept of a single row of boxes, let's say we add another row of 4 boxes, making 8 boxes in total, 4 in each row. This is where align-content comes into play. By applying align-content to the container, it will affect both rows containing a total of 8 boxes. For example, using align-content:center will center both rows within the container. Essentially, align-content is used to organize multi-line flexible boxes.

align-items: center, align-content: flex-start https://i.sstatic.net/VGisj.png