我有一个简单的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类，使用伪元素伪造最后一项，使用非flexbox方法等。
一个大问题是邻居之间的间隙(大小写对齐的按钮包装到多行)。在这种情况下，你不希望物品相互接触，就需要有空隙。我只是想添加一个适当的解决方案，尊重差距，并适用于任何数量的项目。它也是基于假的最后一个元素的想法，但更普遍。有关详细信息，请参阅代码片段注释。
html {
font-size: 1px;
}
.container {
font-size: 16rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background-color: orange;
border-radius: 10rem;
box-sizing: border-box;
color: white;
margin-bottom: 10rem;
padding: 15rem 10rem;
text-align: center;
}
<!--
Our setup from design (example) used later in calculations:
container-width: 100%; (can be any)
max-per-row = 4;
total = 6;
desired-hor-gap = 10rem; (equal to vert. gap)
If you go dynamic (drawing html according to the coming data either in a backend template or in a frontend template), you have to calculate and then set exact properties inline.
<i> (or any real html element) is needed to set inline styles to arrange the last row properly.
"2" in <i> calc function - is 6 % 4 since calc doesn't allow for "%" operator. But in real life you will calculate these numbers in JS or some backend template anyway.
Formulas written in elements' calc functions. Seem to be self-descriptive, but the idea is to set for the last fake item the remainder width + hypothetical gaps.
-->
<div class="container">
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<i style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4 * (4 - 2) + ( 4 - 2 - 1) * 10rem);"></i>
</div>
正如其他海报所提到的-没有干净的方法来左对齐flexbox的最后一行(至少按照目前的规范)
然而，它的价值在于:使用CSS Grid Layout模块，这是非常容易的:
基本上相关代码可以归结为:
ul {
display: grid; /* 1 */
grid-template-columns: repeat(auto-fill, 100px); /* 2 */
grid-gap: 1rem; /* 3 */
justify-content: space-between; /* 4 */
}
1)将容器元素设置为网格容器
2)设置网格的自动列宽度为100px。注意使用了自动填充(而不是自动贴合(对于单行布局)将空轨道折叠为0)，导致项目展开以占用剩余空间。当网格只有一行时，这将导致一个合理的“空格”布局，这在我们的情况下不是我们想要的。(请查看这个演示，看看它们之间的区别))。
3)为网格行和列设置间隙/沟槽-在这里，因为想要一个“空间之间”的布局-间隙实际上是一个最小的间隙，因为它会根据需要增长。
4)类似于flexbox。
ul {
显示:网格;
Grid-template-columns: repeat(自动填充，100px);
grid-gap: 1快速眼动;
justify-content:之间的空间;
/*无趣属性*/
list-style:没有;
背景:小麦;
填充:2快速眼动;
宽度:80大众;
保证金:0自动;
}
李{
高度:50 px;
边框:1px纯绿色;
}
< ul >
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
< / ul >
Codepen演示(调整大小以查看效果)
可以使用“flex-start”手动添加页边距。它需要一些数学技巧，但绝对容易做到，并且很容易与CSS预处理器(如LESS)一起使用。
请看这个LESS mixin的例子:
.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
