阅读 152

flex深入理解

flex

flex-basis:0%表示建议支持是0

flex-basis:auto表示固定尺寸由内容决定,由于元素不具有弹性,因此,元素内的内容不会换行,最终尺寸通常表现为最大内容宽度。

initial 默认值

flex: 0 1 auto

不会增长变大占据flex容器中额外的剩余空间(flex-grow:0),会收缩变小以适合容器(flex-shrink:1),尺寸根据自身宽高属性进行调整(flex-basis:auto)

auto

flex: 1 1 auto

子项会增长变大占据flex容器中额外的剩余空间(flex-grow:1),会收缩变小以适合容器(flex-shrink:1),尺寸根据自身宽高属性进行调整(flex-basis:auto)。

none

flex: 0 0 auto

子项会不会增长变大占据flex容器中额外的剩余空间(flex-grow:0),也不会收缩变小以适合容器(flex-shrink:0),尺寸根据自身宽高属性进行调整(flex-basis:auto)。

flex:0

flex: 0 1 0%

flex:1

flex: 1 1 0%

  • flex:initial表示默认的flex状态,无需专门设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局;
  • flex:0适用场景较少,适合设置在替换元素的父元素上;
  • flex:none适用于不换行的内容固定或者较少的小控件元素上,如按钮。
  • flex:1适合等分布局;
  • flex:auto适合基于内容动态适配的布局;

image-20210712104121426.png

image-20210712104158296.png image-20210712104141850.png

宽度计算

最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
复制代码
  • 基础尺寸由CSS flex-basis属性以及box-sizing盒模型共同决定;
  • 弹性增长指的是flex-grow属性,弹性收缩指的是flex-shrink属性;
  • 最大最小尺寸限制指的是min-width/max-widthwidth等CSS属性,以及min-content最小内容尺寸。

引用

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…

文章分类
前端
文章标签