Flexbox子项宽度不均：纯Flexbox网格无内容子项对齐异常

这个坑我之前踩过！你遇到的问题核心原因是空的flex子元素默认的min-width: auto属性在捣乱——浏览器会默认认为空元素不需要占据太多宽度，直接忽略了flex-grow的空间分配规则，导致最后一行的元素无法对齐。

解决方案1：添加min-width: 0打破最小宽度限制 #

给所有flex子元素加上min-width: 0，这样即使没有内容，浏览器也会允许flex-grow正常拉伸元素到应有的宽度：

.flexline { display: flex; }
.flexline.is-full>* { 
  flex-grow: 1; 
  min-width: 0; /* 关键修复 */
}
.flexline.is-full>.is-taking-2 { flex-grow: 2; }
/* color */
.flexline { background-color: rgba(255, 0, 0, 0.12); height: 60px; }
.flexline>* { background-color: rgba(0, 128, 0, 0.33); margin: 5px; }
/* /color */

解决方案2：使用flex: 1替代单独的flex-grow: 1 #

flex: 1是复合属性，等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%。其中flex-basis: 0%会把元素的初始宽度设为0，让flex-grow从0开始分配空间，自然就能忽略内容是否为空的影响：

.flexline { display: flex; }
.flexline.is-full>* { flex: 1; /* 替换单独的flex-grow */ }
.flexline.is-full>.is-taking-2 { flex: 2; /* 对应调整 */ }
/* color */
.flexline { background-color: rgba(255, 0, 0, 0.12); height: 60px; }
.flexline>* { background-color: rgba(0, 128, 0, 0.33); margin: 5px; }
/* /color */

效果验证 #

修改后，不管子元素有没有内容，都会按照flex-grow的比例均匀分配宽度，最后一行的元素也能完美对齐了。你可以把这两种方案都试试，看哪种更贴合你的代码习惯～

内容的提问来源于stack exchange，提问作者tonymx227