flex-grow
这篇先讲 flex 取值的问题, 后面的文章在深入讲解弹性布局的应用.
1.flex 是由 flex-grow,flex-shrink,flex-basis 组成. 看下图
其中 flex-grow: 代表父容器在主轴上还有多少剩余空间.
关于剩余空间的理解: 父容器 (弹性盒子) 在主轴方向上还有多少可利用空间.
外层 div 弹性布局, 剩余空间 = box.width - item01.width - item02.width - item03.width
flex-grow 默认值为 0, 且为非负数.
eg01:
结果:
将 class="item02" 的 div, 样式设置 flex:2, 效果:
只有 class="item02" 的 div 设置了 flex:2 样式, 意思是剩余空间分成 2 份, 全部给 item02.flex 默认值 0 表示不要剩余空间.
关于 flex 的三属性(1)flex-grow
来源: http://www.bubuko.com/infodetail-2832275.html