Flex-box：将最后一行对齐到网格 [英] Flex-box: Align last row to grid

问题描述

我有一个简单的弹出框布局与一个容器如：

I have a simple flex-box layout with a container like:

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

现在我想要最后一行中的项目与另一个对齐。 justify-content：space-between; 应该被使用，因为可以调整网格的宽度和高度。

Now I want the items in the last row to be aligned with the other. justify-content: space-between; should be used because the width and height of the grid can be adjusted.

目前看起来像

在这里，我想让右下角的项目在中间列。什么是最简单的方法来完成呢？这是一个显示此行为的小 jsfiddle 。

Here, I want the item in the bottom right to be in the "middle column". What is the simplest way to accomplish that? Here is a small jsfiddle that shows this behaviour.

推荐答案

一种方法是插入一些额外的元素（与您希望在一行中拥有的元素的最大数量一样多），这些元素的高度为零。空间仍然分割，但多余的行无法折叠：

One technique would be inserting a number of extra elements (as many as the max number of elements you ever expect to have in a row) that are given zero height. Space is still divided, but superfluous rows collapse to nothing:

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

以后，这可以通过使用多个 :: after（n） 。

In the future, this may become achievable through using multiple ::after(n).

这篇关于Flex-box：将最后一行对齐到网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！