[css] flex布局 元素自动换行三列布局

如图：

要实现这种布局方法：

方法一：

.parent {
  display: flex;
  justify-content: flex-start;
  /* 强制换行 */
  flex-wrap: wrap;
  /* 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式 如果行列间歇不一样也可以分开写 gap: 10px 5px */
  gap: 5px;
  .child {
    min-width: 68px;
    min-height: 28px;
    background: var(--bg-2);
    border-radius: 8px;
  }
}

方法 二：

.parent {
  display: flex;
  justify-content: flex-start;
  /* 强制换行 */
  flex-wrap: wrap;

  .child {
    width: calc((100% - 10px) / 3); /* 10px 为三个元素前面两个的margin-right和 */ 
    margin-bottom: 5px;
    margin-right: 5px;

    min-width: 68px;
    min-height: 28px;
    background: var(--bg-2);
    border-radius: 8px;
    &:nth-child(3n) {
      /* 去除第3n个的margin-right */
      margin-right: 0;
    }
  }
}

方法三

.parent {
  /* grid布局 两端对齐,最后一行左对齐*/
  display: grid;
  /* 1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格*/
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  .child {
    background: var(--bg-2);
    border-radius: 8px;
    min-height: 28px;
  }
}

 注意

 针对元素宽度差别很大的情况，三种方法表现如下：

 方法一：

方法二：

方法三：