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的样式与第一行的元素不一致。

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