flex每行只显示3个 宽度根据内容自适应

可以使用flex布局的`flex-wrap`属性结合`flex-basis`属性来实现每行只显示3个且宽度根据内容自适应的效果。

具体实现步骤如下：

1. 将父元素的`display`属性设置为`flex`，并设置`flex-wrap: wrap`，以实现自动换行的效果。

2. 将子元素的`flex-basis`属性设置为`33.33%`（即每行显示3个），并将`box-sizing`属性设置为`border-box`，以确保子元素的宽度包含边框和内边距。

3. 如果希望子元素的宽度可以根据内容自适应，则可以将`flex-shrink`属性设置为`1`，以允许子元素缩小以适应容器宽度。

示例代码如下：

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    flex-basis: 33.33%;
    box-sizing: border-box;
    flex-shrink: 1;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>
<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
  <div class="item">内容4</div>
  <div class="item">内容5</div>
  <div class="item">内容6</div>
  <div class="item">内容7</div>
  <div class="item">内容8</div>
  <div class="item">内容9</div>
</div>

这样就可以实现每行只显示3个且宽度根据内容自适应的效果。