Flex 布局的核心属性有哪些？flex: 1 是什么意思？

详细解析#

主轴和交叉轴#

flex-direction: row（默认）时主轴是水平方向，交叉轴是垂直方向；设成 column 后反过来。justify-content 永远管主轴，align-items 永远管交叉轴，方向一变，两者控制的方向也跟着变。

容器属性和子项属性#

剩余空间怎么分#

放大：容器宽 600px，三个子项 flex-basis 都是 100px，flex-grow 分别是 1、2、3。剩余空间 600 - 300 = 300px，按 1:2:3 分成 50、100、150，最终宽度是 150、200、250px。

缩小：缩小量按 flex-shrink × flex-basis 加权，避免小元素被缩没。假设子项里内容很少，不受下面说的 min-width: auto 限制：容器宽 300px，两个子项 flex-basis 是 200px 和 400px，flex-shrink 都是 1。溢出 600 - 300 = 300px，权重 200 : 400 = 1 : 2，分别缩小 100px 和 200px，最终是 100、200px。

flex 简写的几个常用值#

规范里 flex: 1 的 basis 写作 0，浏览器的计算值显示为 0%，效果相同。三个 flex: 1 的按钮，只要文字没有超过平分后的宽度，长短不同也一样宽；换成 flex: auto，文字长的按钮会更宽。

min-width: auto 的坑#

flex 子项的 min-width 默认是 auto，表示不能缩得比内容的最小尺寸还小。所以子项里有长单词、长链接、不换行的文本或宽表格时，即使设了 flex: 1 也不会收缩，直接把容器撑破，text-overflow: ellipsis 也不生效。解决办法是给子项设 min-width: 0（纵向布局时是 min-height: 0），或者 overflow: hidden。

代码示例#

<style>
  .row {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .avatar {
    flex: none; /* 头像固定尺寸，不被挤压 */
    width: 40px;
    height: 40px;
  }
  .content {
    flex: 1;
    min-width: 0; /* 关键：允许收缩到比文字内容更窄 */
  }
  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="row">
  <img class="avatar" src="avatar.png" alt="" />
  <div class="content">
    <div class="title">一段很长很长、会超出容器宽度的标题文字</div>
  </div>
  <button>关注</button>
</div>

面试官可能追问#

易错点#

• flex: 1 的 basis 是 0，不是 auto，所以和 flex: auto 的分配结果不一样
• 子项内容不收缩、省略号不出现时，多半是缺了 min-width: 0
• flex-shrink 按 shrink × basis 加权，不是简单按 shrink 比例分；某个子项缩到内容最小尺寸后会被卡住，剩下的溢出量由其他子项承担