menu
more_vert
cssflex

作者:dayu

  技术分享

  - 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

css flex

原文地址:http://www.cnblogs.com/suiyueshentou/p/7238770.html