Flex 布局中把几个元素分别放开怎么实现？

⚡ 速记答案（30 秒）

典型写法：justify-content: space-between 两端对齐中间平均分布。或第一个 margin-right: auto，最后一个 margin-left: auto，中间元素自然被撑开。

📖 详细讲解

标准面试回答（推荐记住）

Flex 布局中把元素分开的常见写法是 justify-content: space-between，这样元素会两端对齐，中间的空间平均分布。另一种灵活的写法是用 auto margin，比如给第一个元素设置 margin-right: auto，最后一个设置 margin-left: auto，中间的元素就会被自动撑开。这种写法更灵活，可以实现更复杂的布局效果。

✅ 面试要点

•space-between 两端对齐
•auto margin 更灵活
•了解 space-around 和 space-evenly

💻 代码示例

Flex 分布元素

<style>
.flex-between {
  display: flex;
  justify-content: space-between;
}

/* 或用 auto margin */
.flex-auto .first { margin-right: auto; }
.flex-auto .last { margin-left: auto; }
</style>

<div class="flex-between">
  <span>左</span>
  <span>中</span>
  <span>右</span>
</div>

🎨 效果预览