时间戳

首页 > 解决方案 > CSS - 弹性网格从左边开始

css - CSS - 弹性网格从左边开始

问题描述

我在这里有一个使用 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>

标签： cssflexbox

解决方案

您最初使用 using 走在正确的轨道上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>

推荐阅读