html代码：

<div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
</div>

CSS代码

.box{
            width: 500px;
            height: 300px;
            display: flex;
            border: 1px solid red;
            justify-content: space-between;
            flex-wrap: wrap;
}
.box div{
        background: green
}
.div1{
width: 120px;
height: 80px;
}
.div2{
width: 100px;
height: 40px;
}
.div3{
width: 60px;
height: 40px;
}
.div4{
width: 300px;
height: 40px;
}

效果图：

2. align-items

这时候再给.box添加align-items:flex-start;,没有变化。

align-items:center变为：

align-items:flex-end变为：

这时候那两行被绑在了一起，要动都是一起动。

3.align-content

忽略第2步
给.box加属性align-content:flex-start,结果：

整个就挨一起去了。

给.box加属性align-content:space-between,结果：

结论：和justify-content作用一样，不过这是纵向的。