css flex 布局，设置一行4个 item，并且每个 item 间距是10px

CSS Flexbox布局是一种现代的网页布局技术，它允许你轻松地创建响应式的、灵活的网格系统。如果你想在一行上展示四个元素（items），并保持每个元素之间有10像素的间隔，你可以这样做：

首先，你需要将容器（通常是一个div或其他块级元素）设置为flex布局。你可以通过`display: flex;`属性来实现这一点。然后，为了保证均匀分布，并留出间距，可以使用`justify-content: space-between;`来使项目间均匀分布，同时使用`gap`属性（如果浏览器支持的话，旧版用`margin`代替）来设置元素之间的间距。

示例代码如下：

.container {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* 或者在不支持gap的浏览器中使用 */
}

.item {
  /* 如果需要，可以添加其他样式 */
}

如果你的浏览器不直接支持`gap`属性，可以用老版本的方式来设置：

.container {
  display: -webkit-box; /* 旧版Safari和Webkit Blink内核（如Chrome） */
  display: -ms-flexbox;   /* IE 10 和 Edge */
  display: flex;

  -webkit-box-pack: justify; /* Webkit 内核 */
  -ms-flex-pack: justify;     /* IE 10 和 Edge */
  justify-content: space-between;

  -webkit-box-gap: 10px; /* Safari 和 Chrome */
  -ms-flex-gap: 10px;      /* IE 10 和 Edge */
  gap: 10px;
}

.item {
  /* ... */
}