我有一个简单的flex-box布局的容器,如:

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

现在我想让最后一行中的项目与其他项目对齐。justify-content:之间的空间;应使用,因为网格的宽度和高度是可以调节的。

目前看来

在这里,我希望右下角的项目在“中间一列”中。最简单的方法是什么?下面是一个展示这种行为的小jsfiddle。

.exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); margin-bottom: 10px; } <div class="exposegrid"> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> </div>


当前回答

这个问题用CSS网格解决了,

这个解决方案只适用于你有固定数量的列,即没有。要显示在单行中的元素

->使用网格但不指定行数,随着元素数量的增加,它包装成列并动态添加行,我在这个例子中指定了三列

->你不需要给你的子/细胞任何位置,因为它会使它修复,这是我们不想要的。

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

其他回答

一种技术是插入一些额外的元素(与您希望在一行中拥有的最大元素数量一样多),这些元素的高度为零。空间仍然是分开的,但多余的行塌陷为空:

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

body { padding: 5%; } div { overflow: hidden; background-color: yellow; } ul { display: flex; flex-wrap: wrap; margin: 0 -4px -4px 0; list-style: none; padding: 0; } li { flex: 1 0 200px; height: 200px; border-right: 4px solid black; border-bottom: 4px solid black; background-color: deeppink; } li:empty { height: 0; border: none; } *, :before, :after { box-sizing: border-box; } <div> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>

在未来,这可以通过在(n)后使用多个::实现。

如果各个子项具有显式的宽度(例如;32%),你可以通过在父元素中添加:after元素并给出相同的显式宽度来解决这个问题。

我喜欢@Dan Andreasson和@Robin的简单回答Métral..然而,它并不完全适用于我。

所以不要:

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

我使用:

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
width: calc(100%/3 - 20px); /* whatever width grid items are */
}

到目前为止,这似乎是预期的效果。

添加一个::之后自动填充空间。不需要污染你的HTML。下面是一个代码依赖体:http://codepen.io/DanAndreasson/pen/ZQXLXj

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

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

哦,男孩,我想我找到了一个很好的解决方案与最小的CSS和没有JS。看看吧:

img {width:100%;} li { display: inline-block; width:8em; list-style:none; } ul {text-align: justify;} <ul> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

这里的关键是要记住,我们试图实现的正是text-align: justify所做的!

HTML中的空元素是为了在不改变外观的情况下完美地显示最后一行,但考虑到您试图实现的目标,可能不需要这些空元素。为了在每种情况下实现完美的平衡,您至少需要x-4个空元素,x是要显示的元素数量,或者n-2, n是要显示的列的数量。