flex布局一行3个

可以使用 Flexbox 布局实现一行三个的效果。具体的实现方式如下：

HTML 代码：

<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS 代码：

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

.item {
  width: calc(33.33% - 10px);
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
}

解释：

1. 首先将包含三个元素的父元素设置为 Flexbox 布局，使用 `display: flex;` 实现。
2. 然后将父元素设置为自动换行，使用 `flex-wrap: wrap;` 实现。
3. 最后通过 `justify-content: space-between;` 将三个子元素均匀地分布在一行中。

对于子元素，可以通过计算宽度来实现一行三个的效果。这里使用 `width: calc(33.33% - 10px);` 计算出每个子元素的宽度，同时设置了上下边距为 10px。

以上代码即可实现一行三个的效果。需要注意的是，这里使用了 `calc()` 函数来计算宽度，因此需要确保浏览器兼容该函数。