Question

我想使用CSS Flex创建一个块状网格。

块必须位于三列中，并且应为父容器宽度的三分之一。

我的问题是我需要在块上有合适的边距。

块必须占容器的百分比，所以我不能在它们之间使用空间。

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  //margin-bottom: 2px;
  width: 33.33%;
}

.block__item:nth-child(3n){
  margin-right: 0;
}

<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

从您的问题来看，我认为这是您要实现的目标：

  .block {
  border: 1px solid lightgrey;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
   justify-content: space-between;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: 33%;
}

<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 class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
    </div>

我添加了供应商前缀，以便在所有浏览器中一致显示。您可以通过调整百分比（即31％的宽度）来调整框之间的间距。如果您打算经常使用Flexbox，则应访问此站点以获取快速的供应商版本：https://dzone.com/articles/spring-data-jpa-auditing-automatically-the-good-stuff

Answer 2

也许您可以简单地减小块的宽度，其余的witdh将其分配给边距。

赞：

.block__item {
    background: grey;
    height: 20px;
    margin-right: 3%;
    width: 30%;
}

Answer 3

问题是容器上的填充物。但是您可以使用width: calc((100% - 10px) / 3);来计算正确的容器宽度的33,33％（不包括填充）。

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: calc((100% - 10px) / 3);
}

.block__item:nth-child(3n){
  margin-right: 0;
}

<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 4

参加聚会有点晚，但是我发现了一个可行的方法：

在容器元素周围具有自动溢出功能，并在预期滚动条出现的一侧为元素本身提供8px的不可见边框。当滚动条显示时，它将显示在不可见边框的顶部，而不是内容的顶部。

Answer 5

很好的问题

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin-left: -1px;
  margin-right: -1px;
}

.block__item {
  background: grey;
  background-clip: content-box;
  height: 20px;
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 1px;
  padding-right: 1px;
  margin-bottom: 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>

实际上，在 html 中拆分布局和内容是一种很好的做法。

.b-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1px;
  margin-right: -1px;
}
.b-row > .b-col {
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 1px;
  padding-right: 1px;
  margin-bottom: 2px;
}

.block__item {
  background-color: grey;
  height: 20px;
}

<div class="block">
  <div class="b-row">
    <div class="b-col">
      <div class="block__item">asdfasfasdf</div>
    </div>
    <div class="b-col">
      <div class="block__item">asdfasfdasf</div>
    </div>
    <div class="b-col">
      <div class="block__item">asdfasdfas</div>
    </div>
    <div class="b-col">
      <div class="block__item">asdfasdfa</div>
    </div>
    <div class="b-col">
      <div class="block__item">asdfasdfadsf</div>
    </div>
  </div>
</div>

无论如何，您可以选择自己的喜好。

CSS-具有右边距的Flex元素

5 个答案: