主页 / 问题 / 936328
Accepted
Raz Galstyan
Asked:2020-01-25 03:15:41 +0000 UTC2020-01-25 03:15:41 +0000 UTC

如果行为空，则对齐内容开始

  • 772

在使用 Flexbox 时，我遇到了这样一个问题。不知何故，如果不发明一辆新自行车，就不可能解决这个问题。

这是一个例子。

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.child {
  width: 24%;
  height: 50px;
  background: red;
  margin-bottom: 20px;
  color: white;
}
<div class="flex">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">last element</div>
</div>

在这里，在示例中，我希望带有铭文的最后一个元素last element位于左侧，前一行的相同元素位于左侧。

也就是说，如果该行未填充，则元素位于左侧。

有人可以帮我解决这个问题。

html

1 个回答

  1. Best Answer

    如果您希望元素一个接一个地以相同的间隙移动，则没有必要使用justify-content: space-between.

    在您的示例中，这些项目24%连续 4 个，并且在 flex 容器的边界上均匀分布。那些。它们之间的三个填充是容器宽度的 4%。

    要点很小 - 在所有元素的右侧添加一个缩进，除了每四个。

    .flex {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 24%;
  height: 50px;
  background: red;
  color: white;
  margin: 0 calc(4% / 3) 20px 0;
}

.child:nth-child(4n+4) {
  margin-right: 0;
}
    <div class="flex">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">last element</div>
</div>

    • 5

相关问题