[css] flex 间距 gap 折行滚动（九宫格 四宫格 横向滚动）

间距 gap

给 flex 布局设置一个 gap 属性，比如说 24 像素，那么 flex 布局下边的每个元素之间，就会有一个 24 像素的空隙

<main>
  <div class="flex-container">
    <div class="flexbox">box1</div>
    <div class="flexbox">box2</div>
    <div class="flexbox">box3</div>
    <div class="flexbox">box4</div>
    <div class="flexbox">box5</div>
    <div class="flexbox">box6</div>
  </div>
</main>

.flex-container {
  gap: 24px;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

参考：

felx gap

折行滚动（九宫格 四宫格 横向滚动）

实现两行多列布局，列的数目不定，左右可以滚动。

先固定父元素高度，然后用flex纵向排列（ flex-direction: column;）。然后子元素高度设置为父元素一半，这样一纵列只能放下两个元素，然后超出换行 （flex-wrap: wrap;），元素就自动向右排列了。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

*{

      padding: 0;

      margin: 0;

    }

    ul{
      height: 300px;
      list-style-type: none;
      width: 350px;
      // 横向滚动
      overflow-x: scroll;
      // 纵向不滚动
      overflow-y: hidden;
      
      display: flex;
      // 折行
      flex-wrap: wrap;
      // 想要横向滚动  一定要设这个
      flex-direction: column;
      align-content: space-between;
      // 间距
      gap:24px;
    }

    li{
      width: 100px;
      height: 120px;
      background: red;
      // margin: 10px;
    }

参考：

flex 实现两行滚动布局实现的思路