css flex 三列显示 并且可以换行

可以使用 CSS 的 flex 布局来实现三列显示并且可以换行。

首先，在父元素上设置 flex 布局：

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

然后在三个子元素上设置 flex 属性，使它们平均分布在父元素的宽度中：

.item {
  flex: 1; /* 每个子元素占据父元素等量的空间 */
}

最后，可以根据需要设置每个子元素的宽度、高度等样式。

完整代码如下:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1;
  /* other styles */
}

这样三个子元素就会在一行中平均分布，如果父元素宽度不够则会换行显示

其中 flex-wrap 可以控制是否允许换行，默认是不允许换行。当子元素数量超过父元素宽度时，如果不设置 flex-wrap: wrap; 会溢出

另外，还可以使用 flex-flow 属性来简写 flex-wrap 和 flex-direction 两个属性。

相关问题

css flex-warp 如何紧贴着换行

要使 flex 容器中的项目紧贴着换行，你可以使用 `align-content` 属性。`align-content` 属性用于设置项目在交叉轴上的对齐方式，并影响换行行为。

如果你想要项目紧贴着换行，可以将 `align-content` 设置为 `flex-start` 或 `flex-end`。具体取决于你希望项目对齐在顶部还是底部。

以下是一个示例：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 或者 align-content: flex-end; */
}

在上面的示例中，`.container` 是一个 flex 容器，设置了 `flex-wrap: wrap;` 来允许项目换行。然后，通过设置 `align-content: flex-start;` 或 `align-content: flex-end;` 来使项目紧贴着换行。你可以根据需要选择合适的对齐方式。

css display:flex 3列显示

### 回答1：
可以使用 flexbox 布局实现3列显示。

首先，需要将父容器的 display 设置为 flex。然后，可以在父容器中使用 flex-wrap 属性来让容器自动换行，并设置 flex-direction 为 row，表示排列方向为横向。最后，可以使用 flex-basis 属性来设置子元素的宽度。

示例代码：

.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.child {
  flex-basis: 33.33%;
}

其中 child 是父容器的子元素，flex-basis: 33.33% 表示三个子元素占满整个父容器的三分之一宽度.

如果你是想要三列固定宽度,可以给三个child分别设置宽度.

### 回答2：
使用CSS的flex属性可以很方便地实现3列的显示效果。我们可以定义一个父容器，然后在这个容器中放置三个子元素，通过设置父容器的display属性为flex，子元素就可以以弹性盒模型的方式排列。

示例代码如下：

<style>
  .container {
    display: flex;
  }
  .col {
    flex: 1;
    height: 200px;
    background-color: lightblue;
    margin: 10px;
  }
</style>

<div class="container">
  <div class="col">第一列</div>
  <div class="col">第二列</div>
  <div class="col">第三列</div>
</div>

以上的代码中，我们定义了一个名为container的类作为父容器，然后在页面中使用这个类。子元素都有一个名为col的类，并且通过设置flex属性为1，使得它们在水平方向上平均分布。它们的高度被设置为200px，背景颜色为浅蓝色，为了更好地观察效果，我们还设置了一些边距。

通过上述代码，就可以实现一个包含3列的显示效果。

### 回答3：
使用CSS的display:flex属性可以实现3列显示的效果。假设有一个容器div，我们可以给这个容器设置display:flex属性，然后再在这个容器内放置3个子元素，即可实现3列显示的布局。

具体步骤如下：
1. 首先，在HTML中创建一个容器div，并给它一个唯一的id或者类名，例如：div id="container"或div class="container"。
2. 在CSS中选中这个容器，通过设置display:flex属性，将该容器设置为flex布局。

#container {
  display: flex;
}

或

.container {
  display: flex;
}

3. 在这个容器内放置3个子元素，可以使用div元素作为子元素，也可以使用其他HTML标签如p、span等。

<div id="container">
  <div>第一列内容</div>
  <div>第二列内容</div>
  <div>第三列内容</div>
</div>

这样就可以实现3列显示的效果了。默认情况下，这3列会平均分配容器的宽度。如果需要对每一列进行具体的布局调整，可以通过CSS的其他属性，如flex-grow、flex-shrink以及flex-basis等来控制每一列的宽度、缩放和基准值。

需要注意的是，对于一些旧版本的浏览器可能不支持display:flex属性，因此在使用这个属性时需要做兼容性处理或者提供替代方案。