flex布局之成员属性flex

关于flex布局基础，可以参考阮一峰大神的Flex布局教程，本篇文章主要讨论起成员属性flex。

记得使用成员属性flex最多的时候是一个父容器由两个子元素，一个子元素宽度固定，另一个子元素需要占据父元素剩余的空间，这时候我们会设置如下

.container {
    display:flex;
}
.item1 {
    width:100px;
}
.item2 {
    flex:1;
}

其实flex是flex-grow,flex-shrink,flex-basis三个属性的简写

注意（开启flex布局的元素，它的成员默认是没有高度和宽度的，由内容撑开）

• flex-grow：表示的是如果父元素右剩余空间，子元素如何来瓜分剩余空间，默认值是0，表示不瓜分，即使容器元素由剩余空间，如上flex:1就相当于flex-grow:1。

.box {
    width: 500px;
    height: 100px;
    display: flex;
}
.item1 {
    flex-grow: 1;
    width: 100px;
    height: 100px;
    background-color: red;
}
.item2 {
    flex-grow: 2;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

首先容器宽度为500，item1宽度设置为100，item2宽度设置为100，容器还剩300，接下来，item1和item2按照权重来瓜分这300px

总权重 = 1 + 2 = 3

item1所得：1/3 * 300 = 100

item2所得：2/3 *300 = 200

所以最终item1宽度200，item2宽度300

• flex-shrink：上面的情况是容器空间足够，如果成员的基础宽度加起来比容器要宽，因为flex默认是不换行的，所以flex-shrink规定了成员如何来缩小的，同样0表示不缩小。

.box {
    width: 500px;
    height: 100px;
    display: flex;
}
.item1 {
    flex-shrink: 2;
    width: 500px;
    height: 100px;
    background-color: red;
}
.item2 {
    flex-shrink: 1;
    width: 300px;
    height: 100px;
    background-color: yellow;
}

容器宽度为500，item1 500,item2 300, 500 - 500 - 300 = -300  => 需要缩小300(设为a)

总权重：2*500 + 1*300 = 1300(设为s)

item1应当缩小：a*2*500/s = 231   => 则item1实际宽度为 500 - 231 = 269

item2应当缩小：a*1*400/s = 69    =>则item实际宽度为 300 - 69 = 231

注意：flex-shrink与flex-grow的算法不一样。

• flex-basis：表示计算剩余空间之前，每个成员的基本宽度，默认值为auto，表示元素的默认宽度。