Flex-box：将最后一行与网格对齐

添加一个自动填充空间的 ::after。无需污染您的 HTML。这是一个显示它的代码笔：http://codepen.io/DanAndreasson/pen/ZQXLXj

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

.grid::after {
  content: "";
  flex: auto;
}

---

正如其他海报所提到的 - 没有干净的方法将最后一行与 flexbox 左对齐（至少按照当前规范）

然而，值得一提的是：使用 CSS Grid Layout Module，这非常容易产生：

基本上相关代码归结为：

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1）使容器元素成为网格容器

2) 使用宽度为 100px 的自动列设置网格。 （注意 auto-fill 的使用（与 auto-fit 相对 - 它（对于 1 行布局）将空轨道折叠为 0 - 导致项目展开以占用剩余空间。这将导致合理的 ' space-between' 布局，当网格只有一行时，这在我们的例子中不是我们想要的。（查看 this demo 以查看它们之间的区别）。

3）为网格行和列设置间隙/排水沟 - 在这里，因为想要一个“间隔”布局 - 间隙实际上是最小间隙，因为它会根据需要增长。

4) 类似于弹性盒。

ul {显示：网格；网格模板列：重复（自动填充，100px）；网格间隙：1rem； justify-content: 之间的空格； /* 无聊的属性 */ list-style: none;背景：小麦；填充：2rem；宽度：80vw；边距：0 自动； } li { 高度：50px;边框：1px 纯绿色； }

• < /li>

Codepen Demo（调整大小看效果）

---

一种技术是插入一些额外的元素（与您期望在一行中拥有的最大元素数一样多），这些元素的高度为零。空间仍然被分割，但多余的行倒塌为空：

http://codepen.io/dalgard/pen/Dbnus

身体{填充：5％； } div { 溢出：隐藏；背景颜色：黄色； } ul { 显示：弹性；弹性包装：换行；边距：0 -4px -4px 0；列表样式：无；填充：0； } li { 弹性：1 0 200px;高度：200px；右边框：4px 纯黑色；边框底部：4px 纯黑色；背景颜色：深粉色； } li:empty { 高度: 0;边框：无； } *, :before, :after { box-sizing:border-box; }

将来，这可能会通过使用多个 ::after(n) 来实现。

---

没有任何额外的标记，只需添加 ::after 即可为我指定列的宽度。

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

使用这样的 HTML：

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

---

我知道这里有很多答案，但是.. 最简单的方法是使用 grid 而不是 flex 和 grid template columns 与 repeat 和 auto fills，您必须在其中设置像素数您从代码段中为每个元素提供了 100px。

.exposegrid { 显示：网格；网格模板列：重复（自动填充，100px）； justify-content: 之间的空格； } .exposetab { 宽度：100px;高度：66px；背景颜色：rgba(255, 255, 255, 0.2);边框：1px 实心 rgba(0, 0, 0, 0.4);边框半径：5px；盒子阴影：1px 1px 2px rgba(0, 0, 0, 0.2);边距底部：10px； }

如果要将最后一项与网格对齐，请使用以下代码：

网格容器

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

网格中的项目

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

诀窍是将项目的最大宽度设置为等于 .card-grid:after 的最大宽度。

Live demo on Codepen

---

可以使用“flex-start”并手动添加边距。它需要一些数学技巧，但绝对很容易做到，并且可以很容易地与像 LESS 这样的 CSS 预处理器一起使用。

例如，请参阅这个 LESS 混合：

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

然后它可以很容易地用于显示响应式网格布局：

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

这是一个例子

http://codepen.io/anon/pen/YyLqVB?editors=110

---

这是很多答案的组合，但它正是我所需要的——也就是说，将 flex 容器中的最后一个子元素向左对齐，同时保持间隔行为（在这种情况下，它是一个三列布局）。

这是标记：

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

---

如果您希望网格视图中的项目与最后一个元素的距离相等。确保您的卡片宽度为 100% 使用以下 css。这工作得很好

.container {
  /* ... snip ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-between;
  grid-gap: 20px;
}

---

此版本是固定宽度块的最佳方式：

http://codepen.io/7iomka/pen/oxxeNE

在其他情况下 - dalgard 版本

http://codepen.io/dalgard/pen/Dbnus

身体{填充：5％； } div { 溢出：隐藏；背景颜色：黄色； } ul { 显示：弹性；弹性包装：换行；证明内容：中心；边距：0 -4px -4px 0；列表样式：无；填充：0； } li { 弹性：1 0 200px;高度：200px；最大宽度：200px；最小宽度：200px；右边框：4px 纯黑色；边框底部：4px 纯黑色；背景颜色：深粉色； } li:empty { 高度: 0;边框：无； } *, :before, :after { box-sizing:border-box; }

---

只需添加几个具有相同属性的假项目，除了高度设置为 0px 到最后。

---

即使 Flexbox 出现了差距，我也会添加一个可行的解决方案。

它使用兄弟组合器来检查 2 个条件。

它检查的第一个条件是元素是否是倒数第二个 div:nth-last-child(2)

对于 4 列布局，我们需要检查位置 2 和3 检查它是在 4 个div:nth-of-type(4n+2) 的第二行还是在一个行的第三个 div:nth-of-type(4n+3)

对于 3 列布局，我们只需要检查位置 2

div:nth-of-type(3n+2)

然后我们可以像下面这样组合 4 列布局

div:nth-last-child(2) + div:nth-of-type(4n+2)

div:nth-last-child(2) + div:nth-of-type(4n+3)

我们还需要处理一种极端情况，即 3n+2 和4 的倍数将获得 35% 的边距右 div:nth-last-child(2) + div:nth-of-type(4n+4)

3列布局将是

div:nth-last-child(2) + div:nth-of-type(3n+2)

然后我们需要为上面的选择器添加一个边距。需要计算margin-right，这取决于flex-basis。

我添加了一个包含 3 列和 4 列的示例以及一个媒体查询。我还添加了一个小的 JavaScript 按钮，它添加了一个新的 div，以便您检查它是否有效。

它是一点点 CSS，但它可以工作。如果您需要更多解释，我也在我的网站上写过这个。 https://designkojo.com/css-programming-using-css-pseudo-classes-and-combinators

变量编号 = 11; $("#add").on("click", function() { number = number + 1; $("#main").append("

"); });身体{边距：0； } 主要{ 显示：弹性；弹性包装：换行；对齐项目：弹性开始；对齐内容：弹性开始； /* 垂直 */ justify-content: space-between;最小宽度：300px；最大宽度：1200px；边距：20px 自动；背景颜色：浅灰色；高度：100vh； } div { 弹性基础：30%;背景颜色：#5F3BB3；最小高度：20px；高度：50px；边距底部：20px；显示：弯曲；证明内容：中心；对齐项目：居中；颜色：#9af3ff；字体大小：3em； } div:nth-last-child(2) + div:nth-of-type(3n+2) { 背景颜色：#f1b73e;右边距：35%； } @media screen and (min-width: 720px) { div { flex-basis: 22%; } div:nth-last-child(2) { 背景色：greenyellow; } div:nth-of-type(4n+2) { 背景颜色: deeppink; } /* 使用 Plus 组合器用于直接兄弟 */ div:nth-last-child(2) + div:nth-of-type(4n+2) { background-color: #f1b73e;保证金-权利：52%； } div:nth-last-child(2) + div:nth-of-type(4n+3) { 背景颜色：#f1b73e;保证金权利：26%； } /* 还需要将 last 设置为 0% 以在变为 (3n+2) 时覆盖 * 任何 3n+2 和 4 的倍数的数字将获得 35% 的 margin-right * div:nth-last-child (2) + div:nth-of-type(3n+2) */ div:nth-last-child(2) + div:nth-of-type(4n+4) { 背景颜色：#f1b73e;右边距：0； } }

添加< /button>

1

2

3

4

5

6

7

8

9

10

11

< /main>