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属性，因此在使用这个属性时需要做兼容性处理或者提供替代方案。