jjw

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

flex 布局 flex-grow 属性

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

当 d1,d2,d3未设置widht  并且flex-grow 为1时, 它们等分父元素的width,如下图:

当d1,d2,d3 未设置widht时, 设置flex-grow都为小数时,相当于按百分比占据父元素的width, 如d1->0.1 d2->0.2 d3->0.3时, 见下图: 

如果d1,d2,d2 flex-grow属性为小数,并且 合计为 1时,会占满整个父元素的width, 如 d1->0.2, d2->0.3 d3->0.5时, 见下图:

当d1,d2,d3有width值时, flex-grow 为小数时, 则按百分比 分配 父元素 剩余的宽度,如d1->0.5, d2,d3未设置时, 见下图: