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的邊界外面去。