css flex

1. 定义

　　flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

　　flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

　　注意：若是元素不是弹性盒模型对象的子元素，则 flex 属性不起做用。

2. 语法

　flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

　　- flex-grow

　　指定该项相对于同一容器中其余灵活项的增加程度。默认值为0。test

　　

　　

　　- flex-shrink

　　指定该项相对于同一容器中其余灵活项的收缩程度。默认值为1。

　　flex环境默认是不换行的，容器长度不够分配时会压缩子元素。

　　

 

　　根据文章   深刻理解 flex-grow & flex-shrink & flex-basis 中给出的计算方法，

　　box1压缩值 = (200*2)  / （200*2 + 160*1） * 60 ≈ 42.86   

　　box1最终宽度 = 200 - 42.86 = 157.14 √

　　box2压缩值 = （160*1） / (200*2 + 160*1) * 60 ≈ 17.14

　　box2最终宽度 = 160 - 17.14 = 142.86 √

　　两个值经过文章所说的方法都计算正确，但具体为何要这样计算呢，暂时还没找到比较官方的说明。

　　- flex-basis

　　指定flex容器中子项的初始长度。默认值为auto。

　　

　　

　　添加右边样式后，剩余长度按1:1分配，即

　　box1宽度：   200 + 40/2 = 220

　　box2宽度： 60 + 40/2 = 80  

3.兼容性

　　

　　详情查询 can i use

 

参考：

深刻理解 flex-grow & flex-shrink & flex-basis 

mdn flex