Flex實現左右布局

html

<div class="business-content-1">
        <div class="item">
            111
        </div>
        <div class="item">
            222
        </div>
        <div class="item">
            333
        </div>
        <div class="item">
            444
        </div>
</div>

css

.business-content-1 {
  display: flex; /* 彈性布局 */
  margin: 0 auto;
  margin-top: 60px;
  width: 1200px;
  height: 354px;
  border: 1px solid red;
  justify-content: space-between; /* 橫向中間自動空間 */
  align-content: space-between;  /* 豎向中間自動空間 */
  flex-wrap: wrap; /* 換行 */
  .item {
    width: 585px;
    height: 162px;
    border: 1px solid blue;
}

這里把高度都給限制死了。
可以換一個思路，通過設置margin-top來處理豎向空間。

.business-content-1 {
  display: flex; /* 彈性布局 */
  margin: 0 auto;
  margin-top: 60px;
  width: 1200px;
  border: 1px solid red;
  justify-content: space-between; /* 橫向中間自動空間 */
  flex-wrap: wrap; /* 換行 */
  .item {
    width: 585px;
    height: 162px;
    border: 1px solid blue;
  }
  .item:nth-child(n+3) /* 第三個元素，及以后的元素 */
  {
    margin-top:30px;
  }
}