.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }

这段 CSS 代码定义了一个名为 `.row` 的类，用于创建一个具有自适应宽度且包裹其子元素的行布局。下面是对这些 CSS 属性的解释：

- `display: -ms-flexbox` 和 `display: flex`: 这两个属性用于指定采用弹性盒子布局。

- `-ms-flex-wrap: wrap` 和 `flex-wrap: wrap`: 这两个属性用于指定弹性盒子的子元素是否换行。`wrap` 值表示在容器宽度不足时，子元素会自动换行。

- `margin-right: -15px` 和 `margin-left: -15px`: 这两个属性用于消除行上的负间距，以防止子元素溢出容器边界。通过为行设置负的左右外边距，可以确保子元素在行中正确对齐。

通过这些 CSS 属性的设置，`.row` 类可以创建一个具有自适应宽度、包裹子元素且消除负间距的行布局。你可以将这个类应用于 HTML 元素，如 `<div class="row"></div>`，以使用这些样式。如果需要修改样式，你可以根据需要进行调整。

相关问题

<view class="rega" v-if="isActive==1"> <text style="margin: 10px;">热门城市</text> <block class="cities row-item flexbox" v-for="(item,index) in hotcities" key="index"> <view class="hotcities—item"> <text>{{item.names}}</text> </view> </block> </view>.row-item { display: flex; flex-direction: row; //设置布局方向为水平 } .bottom_title { text-align: center; margin-left: 20px; } .active { font-weight: bold; border-bottom: 2px solid orange; } .flexbox { display: flex; flex-wrap: wrap; justify-content: space-between; } .hotcities—item { width: 23%; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px; }让block标签里面显示的东西横向布局，每行显示四个，多的显示在下一行

可以在`.flexbox`样式中添加`flex-basis: 23%;`来设置每个`.hotcities—item`元素的宽度为23%，并在`.row-item`样式中添加`flex-wrap: wrap;`来设置元素换行，然后使用`justify-content: space-between;`来设置每行元素之间的间距。最终代码如下：

.row-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hotcities—item {
  flex-basis: 23%;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  padding: 5px;
}

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