CSS 布局浅析：11 元素，每个元素 200px ，要求均分每行，相邻元素间距一样

Alang
190 阅读1分钟

今天在沸点上看到的这个问题：

11 元素排列，每个元素 200px ，4 个元素一行，每行两端对齐，相邻元素间距要一样，仅使用 CSS 实现。

刚开始感觉很简单，自己实现的过程中，却和想象的不太一样。有一些关键点，所以总结下自己的实现分享给大家。

最终实现效果

采用 flex 布局，两端对齐，子元素使用 margin-right 生成间距，父元素使用负 margin 抵消最后一列的间距。

image.png

HTML

<div class="p">
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
</div>

CSS

.p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: calc((800px - 100%) / 3);
}
.c {
  margin-top: 20px;
  margin-right: calc((100% - 800px) / 4);
  flex-basis: 200px;
  flex-shrink: 0;
  height: 100px;
  background: red;
}
.c:last-child { margin-right: auto }

关键点

  • .c:last-child { margin-right: auto } 因为 p 父级元素设置了 space-between; 两端对齐, 这样做可以使最后一行的元素如果不够 4 个时，仍然保持固定间距。

  • 子元素 c 设置 margin-right: calc((100% - 800px) / 4); 设置间距，父元素 p 设置对应负间距 margin-right: calc((800px - 100%) / 3); 来修正最后一列元素的 margin-right 边距。

扩展

同理，如果一排 3 个：

.p {
    margin-right: calc((200px * 3 - 100%) / 2);
}
.c {
    margin-right: calc((100% - 200px * 3) / 3);
}

image.png

同理，如果一排 2 个：

.p {
    margin-right: calc((200px * 2 - 100%) / 1);
}
.c {
    margin-right: calc((100% - 200px * 2) / 2);
}

image.png

相关资料

avatar
文章
阅读
粉丝