**CSS Flex 弹性布局** 中最常用、最均匀的**子元素排列方式**

🔥 一句话讲清：flex 布局里的 space-evenly

这是 CSS Flex 弹性布局 中最常用、最均匀的子元素排列方式。

---

1. 核心作用

让所有子元素之间的间距 完全相等
（包括：最左边 ↔ 第一个元素、元素 ↔ 元素、最后一个元素 ↔ 最右边，间距全部一样大）

---

2. 直观对比（一看就懂）

假设有 3 个盒子在一行：

justify-content: space-evenly ✅

[ 空 ] 盒子 [ 空 ] 盒子 [ 空 ] 盒子 [ 空 ]

所有空隙完全相等

space-between

盒子 [ 空 ] 盒子 [ 空 ] 盒子

两边贴边，中间平分

space-around

[空]盒子[空]  [空]盒子[空]  [空]盒子[空]

两边空隙是中间的一半

---

3. 最常用代码（直接复制）

/* 父盒子必须开启 flex */
.parent {
  display: flex;
  /* 水平方向：均匀分布（所有间距一样） */
  justify-content: space-evenly;
  /* 垂直方向居中（可选） */
  align-items: center;
  /* 宽度随便写 */
  width: 100%;
}

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

---

4. 你最关心的场景

• 做导航栏均匀分布
• 做底部图标栏
• 一行多个项目自动平分间距
  👉 用 space-evenly 最完美、最整齐！

---

🎯 超级总结

space-evenly = 完全均匀分布
所有空隙大小一模一样，两边留空，中间也等距。