Flex三栏布局 Flex三栏布局

1、中间自适应宽度，两边固定宽度

.flex-box{ display: flex; height:200px; width:100%; background:red; }.item2{ flex-grow:1; background:red; }左中右

其中flex-grow是属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

当flex-grow的值为1，即上面例子，则表示剩余宽度（item2的宽度）= flex-box的总宽 - item1 - item2 - 文字宽度

2、左边固定宽度，中间、右边自适应

.flex-box{ display: flex; height:200px; width:100%; background:red; }.left{ width:100px; background:yellow; }.right{ flex-grow:2; background:yellow; } .center{ flex-grow:2; background:red; }leftcenterright

其中center和right的flex-grow的值都为1，即剩余宽度center和right的比例是1：1

表示剩余宽度 = flex-box的总宽 - left的宽度 - 文字宽度（center宽度 = right宽度 = 剩余宽度/2）

3、flex-box设置宽度，且里面left、center、right总宽度大于flex-box的宽度

.flex-box{ display: flex; height:200px; width:400px; background:red; }.left{ width:300px; flex-shrink:2; background:yellow; }.center{ width:300px; flex-shrink:2; background:red; }.right{ width:300px; flex-shrink:3; background:yellow; }leftcenterright

【Flex三栏布局】其中left、center和right的flex-shrink的值为2：2：3，即剩余宽度center和right的缩小比例是2：2：3（right最小）