Flex三栏布局

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


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

  • 当flex-grow的值为1,即上面例子,则表示剩余宽度(item2的宽度)= flex-box的总宽 - item1 - item2 - 文字宽度
2、左边固定宽度,中间、右边自适应


left
center
right

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

  • 表示剩余宽度 = flex-box的总宽 - left的宽度 - 文字宽度(center宽度 = right宽度 = 剩余宽度/2)
3、flex-box设置宽度,且里面left、center、right总宽度大于flex-box的宽度


left
center
right

其中left、center和right的flex-shrink的值为2:2:3,即剩余宽度center和right的缩小比例是2:2:3(right最小)

  • 表示剩余宽度 = flex-box的总宽 - 文字宽度(center宽度 = right宽度 = 剩余宽度/2)

你可能感兴趣的:(Flex三栏布局)