HTML Flex 布局实现盒子左右三等分

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 30%;
  height: 100px;
  background-color: #ccc;
}

1. 将容器设置为 flex 布局，并使用 justify-content 属性设置为 space-between，使得子元素之间平均分配空间。

2. 子元素设置宽度为 30%，即可将一个盒子左右平均分为 3 等分。

注意：

如果盒子之间需要有间距，可以在 .box 中添加 margin 属性进行设置。