flex布局自定义一行几栏,靠左对齐===grid布局

Bunury2025-02-27 19:38

模板

html 复制代码

 <div class="content">
    <div class="item">1222</div>
    <div class="item">1222</div>
    <div class="item">1222</div>
    <div class="item">1222</div>
    <div class="item">1222</div>
    <div class="item">1222</div>
    <div class="item">1222</div>
    <div class="item">1222</div>
  </div>

样式

css 复制代码

.content {
  width: 70%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 30px;
  background-color: skyblue;
  .item {
    /* 去掉两边间隙总60px*/
    flex: 0 0 calc((100% - 60px) / 3);
    height: 120px;
    background-color: pink;
    /* 间隙为30px */
    margin: 0 30px 30px 0;
    &:nth-child(3n) {
      /* 去除第3n个的margin-right */
      margin-right: 0;
    }
    &:nth-last-child(-n + 3) {
      margin-bottom: 0; // 去除最后一行的底部间距
    }
  }
}

使用grid布局

javascript 复制代码

.content {
  width: 80vw;
  margin: auto;
  display: grid;
  /* 设置一行3列 */
  grid-template-columns: repeat(3, 1fr);
  /* 设置间隙为20px */
  grid-gap: 20px;
  padding: 30px;
  background-color: skyblue;
  .item {
    /* 设置高度120px */
    height: 120px;
    background-color: pink;
  }
}

补充：给父盒子添加vw或%单位，否则会失去响应式

**注意：**grid布局子盒子不要给宽度，不然没有自适应了