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

现在来讨论一些极端情况：
1:

flex container设置一个固定高度, 
flex container {flex-direction: column;}
flex items设置一个高度

这种情况的表现是，item会垂直排列，单所有item的高度之和小于container的高度时，item高度为设置的高度，该多高就多高;
但是，如果在数值计算后，所有item的高度之和超过了container的高度，这时候container的高度会被item分完，在垂直方向上被item填满；item之间的高度比例和自己设置的高度比例一致，就和使用了flex-grow的效果一样。
2:

flex container设置一个固定高度, 
flex container {flex-direction: column;}
flex items不设置高度

这个时候，item就根据它的内容把自己撑开，该多高就多高
3:

flex container不设置height, 
flex container {flex-direction: column;}
flex items设置一个px高度或者不设置高度

item会垂直排列，高度由自己内容决定，container的高就是item的高之和
4:

flex container设置一个固定高度, 
flex container {flex-direction: column;}
flex item {flex-grow: 1|2|n};

item垂直排列，所有的item均分container的高度