瓷砖间距相等答案

【问题标题】：Equal spacing between tiles瓷砖间距相等
【发布时间】：2021-05-23 14:17:14
【问题描述】：

是否可以显示 8 个 250 像素 x 250 像素的图块，图块（行和列）之间的间距相等。在花了几个小时试图达到我想要的结果之后，我得出的结论是 Flex 在这种情况下不起作用。我有一个父 div 和 8 个子 div。任何建议将不胜感激！

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-flow: row wrap;
  justify-content: space-between;
}

.children {
  border: 2px solid black;
  width: 250px;
  height: 250px;
}

<article class="parent">

  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>

</article>

【问题讨论】：

标签： css flexbox css-grid

【解决方案1】：

在 gap set of properties 可用于 flexbox 之前，您需要设法找到解决方案。

不过，网格布局很简单。

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  grid-auto-rows: 250px;
  grid-gap: 10px; <----- key rule
}
.children{
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<article class="parent">
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
</article>

【讨论】：

【解决方案2】：

你可以用纯 flex 来实现它。虽然，我个人会像@Michael Benjamin's answer那样使用 CSS Grid。

.parent {
  background: red;
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  justify-content: space-between;
}

.children {
  flex-basis: 245px;
  display: inline-block;
  background: green;
  margin-bottom: 10px;
}

<article class="parent">
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
</article>

动态值示例：

.parent {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  background: red;
}

.children {
  flex-basis: 45%;
  margin-bottom: 5%;
  background: green;
}

<article class="parent">

  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>

</article>

这个答案是为了表明这是可能的和可实现的。对于这类布局，我会再次使用 CSS Grid。

【讨论】：