css中 用flex 实现三个盒子三行排列其中第二行的盒子比其他小一般宽度

使用CSS的Flexbox布局可以很容易地实现三个盒子按照三行排列，且第二行的盒子宽度小于其他两行。下面是实现该布局的基本步骤和代码示例：

1. 首先，需要为父容器设置`display: flex`以及`flex-wrap: wrap`属性，这样子元素可以在容器宽度不足时换行。
2. 然后，为每个子元素设置一个基础的宽度，比如`width: 33.333%`，这样每个子元素默认会占据容器宽度的三分之一。
3. 接着，通过为第二行的盒子设置`order`属性，使得它们在文档流中靠前或靠后排列，从而实现三行的效果。
4. 最后，为第二行的盒子单独设置宽度，比如`width: 15%`，使其宽度小于其他两行。

以下是一个简单的CSS和HTML代码示例：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.box {
  width: 33.333%;
}

.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
  width: 15%;
}

/* 可以通过调整nth-child中的数字来指定特定的子元素 */

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

在上述代码中，`.container` 是父容器，`.box` 是子盒子。`nth-child(4)`, `nth-child(5)`, `nth-child(6)` 选择器用于定位到第二行的三个盒子，并通过`width: 15%`来设置它们的宽度小于其他盒子。