display:flex一行显示四个，且换行后面的元素样式进行设置‘

要实现 `display:flex` 一行显示四个元素的效果，可以设置容器的 `flex-wrap` 属性为 `wrap`，并且子元素的 `width` 属性为 `25%`。这样当容器宽度不足时，子元素就会自动换行并重新排列。

如果您希望换行后面的元素样式进行设置，可以使用 `:nth-child` 选择器来选中指定位置的元素，然后对其进行样式设置。例如，如果您希望每一行的第四个元素设置为红色背景，可以使用以下代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 25%;
}

.item:nth-child(4n) {
  background-color: red;
}

在上面的代码中，`.container` 类表示容器，`.item` 类表示子元素。`flex-wrap: wrap` 属性使得子元素可以自动换行，并且每个子元素的宽度为 `25%`。`nth-child(4n)` 选择器表示每一行的第四个元素，`background-color: red` 属性表示将其背景色设置为红色。

相关问题

display:flex一行显示四个，且后面的元素样式与第一行的不一致

您可以使用CSS的flex布局来实现一行显示四个元素的效果。具体的实现方式是，将父元素的display属性设置为flex，然后设置flex-wrap属性为wrap，这样子元素就会自动换行。接着，设置子元素的宽度为25%（即一行显示四个），并且根据需要对每个子元素进行不同的样式设置。

下面是一个示例代码：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 25%;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
  font-weight: bold;
}

.item1 {
  background-color: red;
}
.item2 {
  background-color: green;
}
.item3 {
  background-color: blue;
}
.item4 {
  background-color: yellow;
}
.item5 {
  background-color: orange;
}
.item6 {
  background-color: purple;
}
.item7 {
  background-color: pink;
}
.item8 {
  background-color: gray;
}

上述代码中，父元素.container设置为flex布局，子元素.item的宽度设置为25%。其中，item1到item4的样式与第一行的元素样式一致，item5到item8的样式与第一行的元素不一致。

您可以根据需要对样式进行修改，实现您想要的效果。

<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;
}