如何在Flex子元素与孙元素间创建均等间距？

当然可以实现这个效果！你的需求是让.child1、.grandchild1、.grandchild2三个盒子并排且间距均等，考虑到你现有的嵌套Flex结构，我给你几种实用的解决方案：

这是最简洁的实现方式，利用Flex原生的gap属性直接控制间距，无需额外处理margin溢出问题：

.parent {
  display: flex;
  gap: 20px; /* 设置你需要的均等间距值 */
}

.child1 {
  flex: 1; /* 让三个盒子平分父容器的可用空间 */
  background: #eee; /* 可选：添加背景方便查看效果 */
  height: 100px;
}

.child2 {
  display: flex;
  flex: 2; /* 因为内部包含两个子元素，flex值设为2，和.child1的1对应，保证三个盒子宽度一致 */
  gap: inherit; /* 继承父容器的gap值，让内部间距和外部保持一致 */
}

.grandchild1, .grandchild2 {
  flex: 1; /* 平分.child2的空间 */
  background: #ddd;
  height: 100px;
}

原理：gap属性会自动在Flex容器的子元素之间创建均匀间距，不需要担心最后一个元素的多余间距。通过设置flex比例，确保三个最终的内容盒子宽度完全相等，完美实现并排且间距均等的效果。

如果需要支持不兼容gap的旧浏览器，可以用margin来模拟间距，需要配合负margin避免容器溢出：

.parent {
  display: flex;
  margin: 0 -10px; /* 负margin抵消子元素的左右margin，防止整体宽度溢出 */
}

.child1 {
  flex: 1;
  margin: 0 10px; /* 左右margin作为间距的一半 */
  background: #eee;
  height: 100px;
}

.child2 {
  display: flex;
  flex: 2;
  margin: 0 10px;
}

.grandchild1, .grandchild2 {
  flex: 1;
  margin: 0 10px;
  background: #ddd;
  height: 100px;
}

原理：每个内容盒子的左右margin设置为间距的一半，相邻盒子的margin叠加后就是完整的间距。父容器的负margin用来抵消最外层盒子的margin带来的整体宽度增加，保证布局不会超出预期范围。

如果允许修改HTML结构，把三个盒子放在同一个Flex容器下会更直接，代码也更简单：

<div class="parent" style="display: flex; gap: 20px;">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.box {
  flex: 1;
  background: #eee;
  height: 100px;
}

这种结构没有嵌套，直接通过父容器的gap和子元素的flex:1就能实现需求，维护起来更方便。

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