flex简写属性为何表现不同？展开后子元素间距不等问题咨询

这个问题其实是flex布局缩写规则里一个容易踩的小坑——你没注意到flex:1的缩写和你手动展开的属性值并不完全等价，核心差异就出在flex-basis上！

关键区别：flex:1 的真实含义 #

当你写flex:1时，它的完整展开是：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%; /* 重点！不是你写的auto */

而不是你默认以为的flex-basis:auto。

为什么flex-basis的值会影响宽度分配？ #

• 当设置flex-basis:auto时，每个子div的初始宽度会基于自身内容计算（比如内容多的div初始宽度更大），之后flex-grow:1只是把容器的剩余空间按比例分配给它们。这就导致内容多的div最终总宽度还是比内容少的宽，看起来“间距不等”。
• 当设置flex-basis:0%时，所有子div的初始宽度都会被重置为0，容器的所有可用空间都会按flex-grow:1的比例（这里所有div的grow值都是1，所以完全平分）分配给它们，最终每个div的宽度完全相等。

修正后的展开代码 #

如果你想手动展开flex:1的效果，应该写成：

#main div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%; /* 替换auto */
  border: 1px solid;
}

这样就能和flex:1实现完全一致的等宽效果了。

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