css实现8个div两行布局

<div class="parent">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
      <div class="child">7</div>
      <div class="child">8</div>
</div>

.parent {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.child {
  box-sizing: border-box;
  flex: 0 0 25%;
  border: 1px solid #409eff;
  height: 40px;
}

<div class="p">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
</div>

.p div {
  border: 1px solid #67c23a;
  text-align: center;
  display: inline-block;
  width: 22%;
  margin: 10px;
}