flex-wrap属性

flex-wrap 属性定义，如果显示不下，如何换行。

默认情况下，子元素都水平显示，显示不下，就自动缩小

nowrap：子元素不换行，子元素宽度超过父容器时，宽度自动缩小
wrap：子元素显示不下，自动换行（宽度不会缩小），剩余空间被所有行平分
wrap-reverse：倒着换行，即：第一行在下方

例子

<style>
    #box{
        width: 300px;
        height: 400px;
        background-color: aquamarine;
        display: flex;
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* flex-direction: column-reverse; */
        /* flex-wrap:wrap; */
        flex-wrap:wrap-reverse;
    }
    .goods{
        width: 100px;
        height: 80px;
        background-color: antiquewhite;
        /* margin: 5px; */
        border: 1px solid red;
    }
</style>

<div id="box">
    <div class="goods">1</div>
    <div class="goods">2</div>
    <div class="goods">3</div>
    <div class="goods">4</div>
</div>

align-content属性

align-content属性，在 子元素换行时才生效，设置交叉轴方向的对齐方式

与 flex-direction 属性有关

当 flex-direction 是 row 时，即：交叉轴垂直从上到下，有以下值：

stretch（默认值）：剩余空间被所有行平分。
flex-start：所有行从交叉轴起点开始填充，第一行子元素与起始点对齐。
flex-end：所有行从交叉轴末尾开始填充，最后一行子元素与终止点对齐。
center：所有行朝向容器的中心填充，每行互相紧挨，相对于容器居中对齐
space-between：均匀分布项目，第一行子元素与起始点齐平，最后一行子元素与终止点齐平
space-around：所有行在容器中平均分布，相邻两行间距相等。所以，每行之间的间距，比第一行子元素到父容器顶部的间距大一倍，同理，比最后一行子元素到父容器底部的间距大一倍。
space-evenly：每行子元素之间的 间隔相等，包括 两侧子元素到容器边缘的间隔

例子

<style>
    #box{
        width: 300px;
        height: 400px;
        background-color: aquamarine;
        display: flex;
        flex-wrap:wrap;
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        /* align-content: space-around; */
        align-content: space-evenly;
    }
    .goods{
        width: 100px;
        height: 80px;
        background-color: antiquewhite;
        /* margin: 5px; */
        border: 1px solid red;
    }
</style>

<div id="box">
    <div class="goods">1</div>
    <div class="goods">2</div>
    <div class="goods">3</div>
    <div class="goods">4</div>
    <div class="goods">5</div>
    <div class="goods">6</div>
</div>

flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

参考：
https://www.runoob.com/w3cnote/flex-grammar.html

原文出处：/show_1GWGBTHiKhF.html