【Q758】如何实现父容器中子元素具有相同间距的分布

[shfshanyue]

布局如下图所示，使每一项间距 16px：

<div class="container">
  <div class="item">01</div>
  <div class="item">02</div>
  <div class="item">03</div>
</div>

[shfshanyue]

代码见 codepen

对于实现该布局，有多种方案，最简单的即 flex/gap：

.container {
  display: flex;
  gap: 16px;
}

如果不借助 flex 的话，使用 * + * 猫头鹰选择器也是一个很好的方案：

.container > * + * {
  margin-left: 16px
}

如果对 * + * 以及 flex 均不熟悉的话，也可以使用 :not(:first-child) 来实现

.item:not(:first-child) {
  margin-left: 16px
}

如果在 tailwindcss 中，可以使用以下写法：

<div class="container space-x-4" > </div>

<div class="container gap-4" > </div>