css flex => flex-wrap

flex的元素默会默认充满一行或者一列，可是当你给他们的contanier设置了flex-wrap以后状况就会不同了。
flex-wrap能够接受三个值：

1: nowrap
    全部flex的元素充满一行或者一列。为默认值。
2: wrap
    全部flex的元素按照其在HTML里面出现的顺序在多行或者多列显示
3: wrap-reverse
    全部flex的元素按照其在HTML里面出现的顺序反过来在多行或者多列显示

接下来咱们就来看看这三个不一样的值所表现出来的效果。由于flex-wrap跟flex-direction的联系比较紧密，因此接下来会一一组合：
首先来看看咱们的代码：

//html
<div class="container">
    <div class="item short">1</div>
    <div class="item short">2</div>
    <div class="item long">3</div>
    <div class="item short">4</div>
    <div class="item short">5</div>
    <div class="item short">6</div>
    <div class="item short">7</div>
</div>

//css
.container {
    width: 500px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid green;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    background: yellow;
    border: 1px solid hotpink;
    width: 30%;
    box-sizing: border-box;
}

.short {
    background: pink;
}

1: flex-direction: row && flex-wrap: wrap

2: flex-direction: row && flex-wrap: wrap-reverse

3: flex-direction: row-reverse && flex-wrap: wrap

4: flex-direction: row-reverse && flex-wrap: wrap-reverse

由于接下来是按照列的排列状况，因此咱们要给每个flex元素一个height，把width去掉（去掉以后会默认平均地分配宽），因此咱们的css须要改变的部分是：

//只有.item改变为
.item {
    background: yellow;
    border: 1px solid hotpink;
    height: 30%;
    box-sizing: border-box;
}

5: flex-direction: column && flex-wrap: wrap

6: flex-direction: column && flex-wrap: wrap-reverse

7: flex-direction: column-reverse && flex-wrap: wrap

8: flex-direction: column-reverse && flex-wrap: wrap-reverse

总结：
当flex元素水平排列时（flex-direction: row | row-reverse）

1: wrap 会按照从上到下的顺序，依次生成新的行
2: wrap-reverse 会按照从下到上的顺序，依次生成新的行

当flex元素为垂直排列时（flex-direction: column | column-reverse）

1: wrap 会按照从左到右的顺序，依次生成新的列
2: wrap 会按照从右到左的顺序，依次生成新的列

边界状况：

默认状况下，全部的item元素都会尝试挤在一行（当设置flex-direction: row;）或者一列(当设置flex-direction: column;)去显示完。

flex-wrap就是用来改变上述的默认行为，让item能多行或者多列的去显示而且尽量地不超出flex container的边界。当flex-direction: row的状况下，flex-wrap会根据item的宽度去看一行最多能放多少个item。当flex-direction: column的状况下，flex-wrap会根据item的高度去看一列最多能放多少个item。因此，若是出现item的宽度或者高度太高，个数又不少的状况，flex container装不下的化，默认这个item就会溢出到container的边界外面去。