css flex 之 flex-grow | flex-direction

flex是CSS的一個特性，經過它能夠讓在某一個區域內的多個元素靈活的佈局，對移動端的佈局特別有用。
跟flex相關的css屬性不止一個，而是不少個，並且有些還很複雜。因此，咱們就一個一個的來。

1: display: flex
要運用flex屬性，首先得在你想讓其子元素佈局的container上面運用這個屬性。
2: flex-grow: 1| 2|...Number
flex-grow只接受數字的值，且不接受負數。它用在想被佈局的元素上面，它表示子元素被分配到的空間，準確地說是比例。來看一段代碼。

//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>

//css
.container {
    display: flex;
}

.item {
    flex-grow: 2;
    background: yellow;
    border: 1px solid;
}
.short {
    flex-grow: 1;
    background: pink;
}

效果：

在以上的例子中，咱們總共有4個div，其中三個的flex-grow爲1，有一個的flex-grow爲2.其實咱們整個container的寬就被平均分爲了的5份，其中第三個div佔了2/5， 其他三個佔了1/5.

3: flex-direction
flex-direction從名字上就能知道，它是跟方向有關的屬性。它用在container上面，決定它的子元素按照什麼方向來排列，它接受4個值：

1: row
2: row-reverse
3: column
4: column-reverse

第一個例子裏面，咱們是沒有給container加flex-direction這個屬性的，由於它的默認值是’row‘.接下來咱們就給container依次運用這四個值，來直觀地感覺一下它們的區別：
1: row

.container {
    display: flex;
    flex-direction: row;
}

結果：子元素按照在HTML裏面出現的順序，在水平方向上依次排列

2: row-reverse

.container {
    display: flex;
    flex-direction: row-reverse;
}

結果： 子元素按照在html裏面出現的順序反過來，水平方向上排列

3: column

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}

效果： 子元素根據在HTML裏面出現的順序，垂直地排列，按照flex-grow的值，分割container的高

4: column-reverse

.container {
    display: flex;
    flex-direction: column-reverse;
    height: 200px;
}

效果： 子元素根據在HTML裏面出現的順序反過來，垂直地排列，按照flex-grow的值，分割container的高