[CSS Elastic box model align-content align-items Properties] Elastic box model Flex layout Align-items and Align-content Properties explained and examples of the differences between the demo

Align-items

The Align-items property applies to all Flex containers, which are used to set the default alignment of each flex element on the side axis, as well as a response from one of the respondents:

Align-items and Align-content have the same functionality, but the difference is that it is used to center each single-row container instead of the entire container.

Align-content

The Align-content property applies only to multiple lines of flex containers, and when there is extra space on the side axis to align the flex lines inside the Flex container , it feels a little bit abstract after this translation, but one of the main points is that multiple lines ,
Let's write a small example below.

class="child-1">    class="child-2" > </div>    class="child-2"> </div></div >

The HTML structure is as above.
If Child-1 is width set to 100px , Child-2 is width set to 30px , so child-2 will be arranged in a row, the specific CSS is as follows

<style type="text/css">* {    margin:0px;    padding:0px;} div {    border:1px solid #0f0f0f;}. Child-1  {    margin:30px auto;    Display:flex;    width:100px;    height:60px;    Justify-content:space-around;    Align-content:center;}. Child-2  {    width:30px;    height:20px;} </style>

The final results are as follows

So for a single line of flex elements, align-content is not effective, and .child-1 if align-items:center; you use it, you will get the desired effect, such as

But if it becomes a multi-row container
The align-items effect of using is as follows

Use the align-content effect as follows

[CSS Elastic box model align-content align-items Properties] Elastic box model Flex layout Align-items and Align-content Properties explained and examples of the differences between the demo