我有一个简单的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>
这里是另外两个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);
}
显然，这取决于你最终设置容器的填充/边距/宽度和单元格的底部边距等。
希望能有所帮助!
假设:
你想要4列网格布局与包装
项目的数量不一定是4的倍数
除了第1、5、9项以外，在每一项上都设置左距。如果左边的边距是10px，那么每行有30px的边距分布在4个项目中。项目宽度百分比计算方法如下:
100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4
这是一个体面的工作，涉及flexbox最后一行的问题。
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 1em 0 3em;
background-color: peachpuff;
}
.item {
margin-left: 10px;
border: 1px solid;
padding: 10px;
width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
background-color: papayawhip;
}
.item:nth-child(4n + 1) {
margin-left: 0;
}
.item:nth-child(n + 5) {
margin-top: 10px;
}
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</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;
}
