The difference between Align-items and align-content in flex layouts

Reference: Http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content

Read a lot of technical documents of translation, this piece is vague, see stackoverflow on the answer after someone asked to feel very clear, special to share, there is improper welcome to correct.
Align-items

The Align-items property applies to all Flex containers, and sets the
Default alignment of the flex items along the cross axis of each flex
Line.

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.
There is also a good answer, as follows

Align-items have the same functionality as align-content but the difference are that it works to center every Single-line co Ntainer instead of centering the whole container.

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

Figure below

align-content

The Align-content property is applies to multi-line flex containers, and aligns the flex lines within the Flex container When there was extra space in the Cross-axis.

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

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

The HTML structure is as above.
If the width of child-1 is set to 100px,child-2 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 result is the following figure

So for flex elements with only one line, align-content is ineffective if. Child-1 instead of align-items:center, the desired effect is achieved, as shown in the following figure

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

Use the Align-content effect as follows