jjw

写给自己的博客。 记录学习的点滴以备查。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

flex 布局 shrink 属性

Posted on 2020-05-16 00:46  jjw  阅读(277)  评论(0编辑  收藏  举报

d1,d2,d3的width之和大于父元素的宽,并且都没有设置flex-shrink属性时, 会自动按自身比例收缩,见下图:

如果d1,d2,d3都设置了flex-shrink值时,即使是0, 则会溢出父元素的边框,见下图:

当d1,d2,d3任何一个设置了flex-shrink属性值时,(其它两个未设置flex-shrink值是)无论如何都不会突破父元素的边框, 见下图:

当d1,d2 flex-shrink为0, d3是其它值时,如下图:

由此可见,当flex-shrink为0,表示元素不收缩,否则会按一定比较收缩到不会溢出父元素的边框为止。

元素的收缩是按自身的width的比例收缩。