面试都被问懵了？CSS 的 flex:1 和 flex:auto 真不是一回事！90%的人都搞错了

flex:1和flex:auto到底有啥区别？看完这篇别再搞混了！

前几天看到一个看似简单的面试题："flex:1和flex:auto有什么区别？" 一查才发现，这俩真的不是一回事！而且据说90%的前端都容易搞错。

假设你有一个div，里面放了三个子元素，你想让它们平均分宽度。很多人会这样写：

css 复制代码

.item {
  flex: 1;
}

这样写没问题，三个元素确实会等分。但如果你改成：

css 复制代码

.item {
  flex: auto;
}

效果可能就完全不一样了！你可以试试。下面有对比图。

首先要知道，flex属性其实是三个属性的简写：

flex: flex-grow flex-shrink flex-basis;

这仨兄弟分别管什么呢？

flex:1 到底是什么意思？

当你写 flex:1 时，实际上相当于：

css 复制代码

{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

注意这里的flex-basis:0% 这意味着它的初始大小是0，剩余空间会完全按照flex-grow的比例分配。

flex:auto又是什么意思？

当你写 flex:auto 时，相当于：

css 复制代码

{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

关键区别就在这个flex-basis:auto上！它会根据元素内容大小来设定初始尺寸。

假设我们有三个div：

html 复制代码

<div class="container">
  <div class="item">短文本</div>
  <div class="item">这是一段比较长的文本内容</div>
  <div class="item">中等待遇</div>
</div>

css 复制代码

.container { display: flex; }
.item { flex: 1; }

结果：三个div完全等分，不管里面文字多少！

css 复制代码

.container { display: flex; }
.item { flex: auto; }

结果对比

你会发现，有更多文字的div会更宽一些，因为它的初始大小（flex-basis:auto）更大。

如果你想要所有菜单项等宽，用flex:1。如果你想要菜单项根据文字长度自适应，用flex:auto。如下图：

flex:1 = 我不管内容，我就要均分！ flex:auto = 先按内容大小来，剩下的再分！

这下明白了吧？下次面试再被问到，可别再说"差不多"了！

赶紧收藏起来，说不定哪天就用上了呢？

我是大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！