Question

我在这里有一个使用CSS flex的简单网格。

我需要3列，占父容器宽度的百分比。

我还需要在每个块上留出适当的边距。

我几乎在这里工作了，但是我需要第二行中的块从左到右移动，这里第二行中的第二个块在右边。

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
  justify-content: space-between;
  //justify-content: flex-start;

}

.block__item {
  //align-self: flex-start;
  background: grey;
  height: 20px;
  //margin-right: 8px;
  margin-bottom: 2px;
  width: calc(33.3% - 2px);
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

Answer 1

最初使用justify-content: flex-start使您处在正确的轨道上。是justify-content: space-between在第二行给了您空白，所以我删除了所有内容，然后将所有内容对齐。我也调整了边距和填充以匹配间距。

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px 3px 5px 5px;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  margin-bottom: 2px;
  width: calc(33.3% - 2px);
  margin-right:2px;
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

Answer 2

另一种考虑方法是使用包装元素（.block__item），该元素为元素之间的间隔提供内部填充。这些包装元素在物理上彼此相邻，但是在它们的内容（.block__content）之间提供了视觉上的区别。

这样做的好处是您不需要在宽度或弹性基础的计算中包括间距。如果要更改间距，只需更新padding。

^{* 请注意，您需要将元素的框模型更改为border-box才能利用此功能。}

* {
  box-sizing: border-box;
}

.block {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 900px;
  border: 1px solid lightgrey;
  padding: 2px;
}

.block__item {
  flex: 0 1 calc(100% / 3);
  padding: 2px;
}

.block__content {
  height: 20px;
  background-color: grey;
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 400px) {
  .block__item {
    flex-basis: 50%;
  }
}

<div class="block">
  <div class="block__item">
    <div class="block__content">1</div>
  </div>
  <div class="block__item">
    <div class="block__content">2</div>
  </div>
  <div class="block__item">
    <div class="block__content">3</div>
  </div>
  <div class="block__item">
    <div class="block__content">4</div>
  </div>
  <div class="block__item">
    <div class="block__content">5</div>
  </div>
</div>

Answer 3

您可以稍微减少页边距，使它们更合适，并使用justify-content: flex-start保持弹性项目向左对齐；或者您也可以使用 CSS网格并定义所需的gap以及所需的总列数（在这种情况下为3），使用网格甚至可以避免百分比计算，而只需告诉每个项目使用一部分可用空间。

我认为CSS Grid的最大好处是可以避免浪费可能留有百分比的空间，并且如果要添加或删除列，也不需要更改项目的任何其他内容。 / p>

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: calc(33.3% - 2px);
}

.block-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(20px, auto);
  grid-gap: 2px;
  border: 1px solid grey;
  padding: 5px;
}

.block-grid__item{
  background-color: red;
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

<div class="block-grid">
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
</div>

CSS-flex网格从左侧开始

3 个答案: