我有一个简单的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>
你不能。Flexbox不是一个网格系统。它没有实现您所要求的功能的语言结构，至少在使用justify-content: space between时是这样。使用Flexbox最接近的方法是使用列方向，这需要设置显式的高度:
http://cssdeck.com/labs/pvsn6t4z(注:不包括前缀)
ul {
display: flex;
flex-flow: column wrap;
align-content: space-between;
height: 4em;
}
然而，只使用列会更简单，它有更好的支撑，不需要设置特定的高度:
http://cssdeck.com/labs/dwq3x6vr(注:不包括前缀)
ul {
columns: 15em;
}
这里是另外两个scss mixins。
这些mixins假定你不会使用像Isotope这样的js插件(它们不尊重html标记顺序，因此会打乱css n条规则)。
此外，您将能够充分利用它们，特别是当您以移动优先的方式编写响应性断点时。理想情况下，您将在较小的断点上使用flexbox_grid()，在以下断点上使用flexbox_cell()。Flexbox_cell()将负责重置先前设置的不再用于较大断点的边距。
顺便说一下，只要你正确地设置了容器的flex属性，如果需要的话，你也可以只在项目上使用flexbox_cell()。
代码如下:
// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){
display: flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: flex-start;
> *{
@include flexbox_cell($columns, $gutter_width);
}
}
// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
$base_width: 100 / $columns;
$gutters: $columns - 1;
$gutter_offset: $gutter_width * $gutters / $columns;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; // IE10 doesn't support calc() here
box-sizing:border-box; // so you can freely apply borders/paddings to items
width: calc( #{$base_width}% - #{$gutter_offset} );
// remove useless margins (for cascading breakponts)
&:nth-child(#{$columns}n){
margin-right: 0;
}
// apply margin
@for $i from 0 through ($gutters){
@if($i != 0){
&:nth-child(#{$columns}n+#{$i}){
margin-right: $gutter_width;
}
}
}
}
用法:
ul{
// just this:
@include flexbox_grid(3,20px);
}
// and maybe in following breakpoints,
// where the container is already setted up,
// just change only the cells:
li{
@include flexbox_cell(4,40px);
}
显然，这取决于你最终设置容器的填充/边距/宽度和单元格的底部边距等。
希望能有所帮助!
我发现了一个有效的解决方案，证明内容也可以居中/空间均匀/等等…(如果你知道单行中的条目数):
HTML:
<section class="container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<p aria-hidden="true"></p>
<p aria-hidden="true"></p>
<p aria-hidden="true"></p>
</section>
<p>标签的数量(它可以是任何其他标签)是每行中的项目数量减1。对于不同的屏幕尺寸，您可以使用媒体查询操作它。
CSS:
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.flex-item {
width: 300px;
height: 300px;
background: #21BA45;
}
.container > p {
width: 300px;
height: 300px;
}
