标签：class asi 结果 容器 ros 剩余空间 alt ima strong
在项目练习中，发现利用弹性布局方式为盒子设置相同的属性：
.main>.section{ display: flex; height: 100px; margin: 4px 2px; } .main>.section>.col{ background: #ff5555; flex: auto ; border-left: 1px solid #fff; box-sizing: border-box; text-align: center; }
并不能使得每一行的盒子在主轴方向上平分弹性容器的尺寸（此处为宽度）：
这是因为为元素设置的
div{ flex: auto ; }
等同于
div{ flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
flex-basis: auto;会使得盒子的宽度由盒子内容决定，要想使得宽度一致，并且当主轴方向存在剩余空间就统一扩大，空间不足则缩小，应该改变其值为：
div{ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }
或者更简便的写法：
div{ flex: 1; }
上述两者效果是一致的，得到结果如图：
flex简写形式的表达含义
div{ flex: none; } /* 等同于 */ div{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
div{ flex: auto; } /* 等同于 */ div{ flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
div{ flex: 1; /* 非负数 */ } /* 等同于 */ div{ flex-grow: 1; /* 非负数 */ flex-shrink: 1; flex-basis: 0%; }
div{ flex: 0%; /* 长度或百分比 */ } /* 等同于 */ div{ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; /* 长度或百分比 */ }
div{ flex: 1 2; /* 两个非负数 */ } /* 等同于 */ div{ flex-grow: 1; /* 第一个非负数 */ flex-shrink: 2; /* 第二个非负数 */ flex-basis: 0%; }
标签：class asi 结果 容器 ros 剩余空间 alt ima strong
原文地址：https://www.cnblogs.com/xiaomi0610/p/12083990.html
