我有一个简单的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的最后一行(至少按照目前的规范)
然而,它的价值在于:使用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演示(调整大小以查看效果)
假设:
你想要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>
这里是另外两个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);
}
显然,这取决于你最终设置容器的填充/边距/宽度和单元格的底部边距等。
希望能有所帮助!