About CSS flexbox: equal values for properties other than CSS

Question

I am studying the language documentations, and it occurred to me the following doubt:

Both the property align-content as to property align-items accepts the values:

• flex-start
• flex-end
• stretch

And looking at the examples, I couldn’t tell the difference.

So what would be the difference between the two properties?

How to know, for example, when to write flex-start in align-content or align-items?

Answer 1

Both are intended to manipulate the content of an element that is display: flex;, this we shall call the parent element.

The align-items is more usual, as it is independent of the number of lines that the children of the parent element have.

Other than align-content that there is only effect when the children of the parent element occupy more than one line.

Here an excellent flexbox guide, that explains better what was said above.

Answer 2

The align-content only has effect in conjunction with the property flex-wrap with the value wrap and if there is line break.

For example, if you have a container of 100px flex with two daughter Ivs that do not fit in width, there will be a mandatory line break. Soon, the align-content will define the position of the daughters.

Example of two daughters, one with 80px and another with 30px. Soon, 80px + 30px = 120px, is larger than the container width, and this will force the line break with flex-wrap: wrap, and the align-content will define the alignment of the Divs. In the example below, in the center of the container:

.it{
   display: flex;
   align-content: center;
   width: 100px;
   height: 200px;
   background: red;
   flex-wrap: wrap;
}

.it div{
  background: blue;
}

#f1{
   width: 80px;
   height: 30px;
}

#f2{
   width: 30px;
   height: 30px;
}

<div class="it">
   <div id="f1">div1</div>
   <div id="f2">div2</div>
</div>

If there is no line break, that is, if the two daughter Ivs are equal to or less than the container width, there will be no line break, so the property align-content will have no effect:

.it{
   display: flex;
   align-content: flex-end;
   width: 100px;
   height: 200px;
   background: red;
   flex-wrap: wrap;
}

.it div {
  background: blue;
}

#f1{
   width: 80px;
   height: 30px;
}

#f2{
   width: 20px;
   height: 30px;
}

<div class="it">
   <div id="f1">div1</div>
   <div id="f2">div2</div>
</div>

Already the property align-items will align all daughter Divs independent of line break or not. If there is line break, it will align Divs equally in the container:

.it{
   display: flex;
   align-items: flex-start;
   width: 100px;
   height: 200px;
   background: red;
   flex-wrap: wrap;
}

.it div {
  background: blue;
}

#f1{
   width: 80px;
   height: 30px;
}

#f2{
   width: 30px;
   height: 30px;
}

<div class="it">
   <div id="f1">div1</div>
   <div id="f2">div2</div>
</div>

If there is no line break, in the same way:

.it{
   display: flex;
   align-items: center;
   width: 100px;
   height: 200px;
   background: red;
}

.it div {
  background: blue;
}

#f1{
   width: 80px;
   height: 30px;
}

#f2{
   width: 20px;
   height: 30px;
}

<div class="it">
   <div id="f1">div1</div>
   <div id="f2">div2</div>
</div>