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的高