弹性框:将最后一行与网格对齐

小开

你不能。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;
}

小开

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

< a href = " http://codepen。io / dalgard /钢笔/ Dbnus noreferrer“rel = > 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>

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

小开

有一种没有flexbox的方法，尽管您需要满足以下条件。1)容器有填料。2)项目是相同的大小，你确切地知道你想要多少每行。

ul {
padding: 0 3% 0 5%;
}
li {
display: inline-block;
padding: 0 2% 2% 0;
width: 28.66%;
}

容器右侧较小的填充允许每个列表项右侧的额外填充。假设与列表对象相同的父对象中的其他项被填充了0 5%，它将与它们齐平。你也可以调整百分比到你想要的幅度，或者使用计算px值。

当然，你也可以使用n -child (IE 9+)来删除每第三个框上的空白。

小开

一个可能的解决方案是在.grid容器上使用justify-content: flex-start;，在它的子元素上使用大小限制，在适当的子元素上使用边距——这取决于所需的列数。

对于一个3列网格，基本的CSS看起来是这样的:

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


.grid > * {
flex: 0 0 32%;
margin: 1% 0;
}


.grid > :nth-child(3n-1) {
margin-left: 2%;
margin-right: 2%;
}

这是另一个不完美的解决方案，但它有效。

http://codepen.io/tuxsudo/pen/VYERQJ < a href = " http://codepen.io/tuxsudo/pen/VYERQJ " > < / >

小开

使用flexbox和一些媒体查询，我做了这个小工作:http://codepen.io/una/pen/yNEGjv(它有点俗气，但有效):

.container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
max-width: 1200px;
margin: 0 auto;
}


.item {
background-color: gray;
height: 300px;
flex: 0 30%;
margin: 10px;


@media (max-width: 700px) {
flex: 0 45%;
}


@media (max-width: 420px) {
flex: 0 100%;
}


&:nth-child(3n-1) {
margin-left: 10px;
margin-right: 10px;
}
}

小开

可以使用“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;
}

这里有一个例子

< a href = " http://codepen.io/anon/pen/YyLqVB?编辑= 110 " rel = " nofollow”> http://codepen.io/anon/pen/YyLqVB?编辑= 110 < / >

小开

最佳答案

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

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


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

小开

我为它做了一个SCSS mixin。

@mixin last-row-flexbox($num-columns, $width-items){


$filled-space: $width-items * $num-columns;
$margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));


$num-cols-1 : $num-columns - 1;


&:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
margin-left: $margin;
}
@for $i from 1 through $num-columns - 2 {
$index: $num-columns - $i;
&:nth-child(#{$num-columns}n+#{$index}):last-child{
margin-right: auto;
}
}
}

这是代码依赖的链接:http://codepen.io/diana_aceves/pen/KVGNZg

你只需要设置项目的宽度百分比和列数。

我希望这能帮助到你。

小开

这个版本是固定宽度的块的最佳方法:

< a href = " http://codepen。io / 7 iomka /钢笔/ oxxeNE " rel = " http://codepen.io/7iomka/pen/oxxeNE nofollow”> < / >

在其他情况下-达尔加德版本

< a href = " http://codepen。io / dalgard /钢笔/ Dbnus " rel = " http://codepen.io/dalgard/pen/Dbnus nofollow”> < / >

.

body {
padding: 5%;
}


div {
overflow: hidden;
background-color: yellow;
}


ul {
display: flex;
flex-wrap: wrap;
justify-content:center;
margin: 0 -4px -4px 0;
list-style: none;
padding: 0;
}


li {
flex: 1 0 200px;
height: 200px;
max-width:200px;
min-width: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>

小开

这里是另外两个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);
}

显然，这取决于你最终设置容器的填充/边距/宽度和单元格的底部边距等。

希望能有所帮助!

小开

我可以在容器上使用justify-content: space-between

小开

这很老套，但对我来说很管用。我试图达到一致的间距/边距。

.grid {
width: 1024px;
display: flex;
flex-flow: row wrap;
padding: 32px;
background-color: #ddd;


&:after {
content: "";
flex: auto;
margin-left:-1%;
}


.item {
flex: 1 0 24.25%;
max-width: 24.25%;
margin-bottom: 10px;
text-align: center;
background-color: #bbb;


&:nth-child(4n+2),
&:nth-child(4n+3),
&:nth-child(4n+4) {
margin-left: 1%;
}


&:nth-child(4n+1):nth-last-child(-n+4),
&:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
margin-bottom: 0;
}


}
}

< a href = " http://codepen。io / rustydev /钢笔/ f7c8920e0beb0ba9a904da7ebd9970ae " rel = " http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/ nofollow”> < / >

小开

似乎没有人在最后一项上提出弹性增长的解决方案。这个想法是让你的最后一个伸缩项目占据所有的位置，可以使用flex-grow: 1.

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


.grid > *:last-child {
flex-grow: 1;
}

注意:这个解决方案并不完美，特别是当你在你的伸缩项目中有居中的元素时，因为它将以可能巨大的最后一个伸缩项目为中心。

小开

不需要任何额外的标记，只需添加::after就可以指定列的宽度。

.grid {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
.grid::after{
content: '';
width: 10em // Same width of .grid__element
}
.grid__element{
width:10em;
}

使用这样的HTML:

<div class=grid">
<div class="grid__element"></div>
<div class="grid__element"></div>
<div class="grid__element"></div>
</div>

小开

这是许多答案的组合，但它确实是我所需要的——这是，将flex容器中的最后一个子元素对齐到左侧，同时保持空间之间的行为(在这种情况下，它是一个三列布局)。

加价如下:

.flex-container {
display: flex;
justify-content: space-between;
flex-direction: row;
}


.flex-container:after {
content: "";
flex-basis: 30%;
}

小开

如果你想让最后一项与网格对齐，请使用以下代码:

网格容器

.card-grid {
box-sizing: border-box;
max-height: 100%;
display: flex;
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}


.card-grid:after {
content: "";
flex: 1 1 100%;
max-width: 32%;
}

网格中的项

.card {
flex: 1 1 100%;
box-sizing: border-box;
-webkit-box-flex: 1;
max-width: 32%;
display: block;
position: relative;


}

诀窍是将项目的max-width设置为.card-grid的max-width:after。

< a href = " http://codepen。io/frankspin/pen/apeJQB" rel="noreferrer"> Codepen上的现场演示 . io/frankspin/pen/apeJQB" rel="noreferrer">

小开

是的。!我们可以但与一些媒体查询&# EYZ0。

这里我用了4列。检查我的代码:

.container {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
}


.container .item {
display: flex;
display: -webkit-flex;
display: -moz-flex;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}


.container .item .item-child {
width: 130px;
height: 180px;
background: red;
margin: 10px;
}


@media (max-width: 360px) {
.container .item {
flex-basis: 100%;
}
}


@media (min-width:360px) and (max-width: 520px) {
.container .item {
flex-basis: 50%;
}
}


@media (min-width:520px) and (max-width: 680px) {
.container .item {
flex-basis: 33.33%;
}
}

<div class="container">


<div class="item">
<div class="item-child">1</div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>


</div>

# EYZ0 1)不需要创建子div。它可以是任何其他标签，如'img' r任何你想要的..
2)如果你想要更多的列，调整媒体查询和最大数目。的列。

小开

正如其他海报所提到的-没有干净的方法来左对齐flexbox的最后一行(至少按照目前的规范)

然而，它的价值是:使用CSS网格布局模块，这是惊人地容易产生:

基本上相关代码可以归结为:

ul {
display: grid; /* 1 */
grid-template-columns: repeat(auto-fill, 100px); /* 2 */
grid-gap: 1rem; /* 3 */
justify-content: space-between; /* 4 */
}

1)将容器元素设置为网格容器

2)设置网格的自动列宽度为100px。(注意使用自动(而不是auto-fit -它(对于1行布局)将空轨道折叠为0 -导致项目展开以占用剩余的空间。当网格只有一行时，这将导致一个合理的“空格”布局，这在我们的情况下不是我们想要的。(查看这个演示查看它们之间的区别))。

3)为网格行和列设置间隙/沟槽-在这里，因为想要一个“空间之间”的布局-间隙实际上是一个最小的间隙，因为它会根据需要增长。

4)类似于flexbox。

ul {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 1rem;
justify-content: space-between;
  

/* boring properties */
list-style: none;
background: wheat;
padding: 2rem;
width: 80vw;
margin: 0 auto;
}


li {
height: 50px;
border: 1px solid green;
}

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Codepen演示(调整大小以查看效果)

小开

如果你想要一个在项目之间有一些空间的网格，并且项目开始时没有任何初始空间，那么这个简单的解决方案是有效的:

.grid {
display: flex;
flex-flow: row wrap;
margin: 0 -5px; // remove the inital 5px space
width: auto;
}
.grid__item {
width: 25%;
padding: 0 5px; // should be same as the negative margin above.
}

如果你想要初始的5px空间，那么只需删除负边距:)简单。

https://jsfiddle.net/b97ewrno/2/

被接受的答案，虽然很好，但它导致第二行元素之间没有空格。

小开

哦，男孩，我想我找到了一个很好的解决方案与最小的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是要显示的列的数量。

小开

假设:

你想要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>

小开

我知道这里有很多答案，但是…最简单的方法是用grid代替flex和grid template columns，用repeat和auto fills，在这里你必须设置你给每个元素的像素数，从你的代码片段中100px。

.exposegrid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
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>

小开

如果你知道行中元素之间的空间宽度和行中元素的数量，这将工作:

例如:一行中有3个元素，元素之间的间距为10px

div:last-child:nth-child(3n+2) {
flex-grow: 1
margin-left: 10px
}

小开

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

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

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

→你不需要给你的子/细胞任何位置，因为它会使它固定，这是我们不想要的。

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

小开

只需要添加一些具有相同属性的假项目，除了高度设置为0px到最后。

小开

简单使用Jquery/Javascript技巧添加一个空div:

if($('.exposegrid').length%3==2){
$(".exposegrid").append('<div class="exposetab"></div>');
}

小开

我修改了Dan Andreasson给出的示例，在元素上使用右边框来创建一个伪gutter。然后，您可以使用第n -child删除所需列网格计数的最后一个子节点上的边框。这里是一个演示https://codepen.io/JacobLett/pen/mdVoroM

/* demo only */
body {
margin:0;
padding:0;
max-width:1024px;
margin:0 auto;
}
.block-list {
background: #ccc;
border:1px solid #ccc;
}


.block-list .block-list__item {
background: #eee;
}
/* demo only */








.block-list .block-list__item {
min-height: 100px;
margin-bottom: 1rem;
}


@media only screen and (min-width: 900px) {
.block-list {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
background-color: #ffffff;
margin: 1em auto;
}


.block-list:after {
content: "";
-webkit-box-flex: 1;
flex: auto;
}


.block-list__item {
height: 10em;
width: 25%;
box-sizing: border-box;
border-right: 10px solid white;
}


.block-list-2 .block-list__item {
width: 50%;
}


.block-list-2 .block-list__item:nth-child(2n) {
border: none;
}


.block-list-3 .block-list__item {
width: 33.3%;
}


.block-list-3 .block-list__item:nth-child(3n) {
border: none;
}


.block-list-4 .block-list__item {
width: 25%;
}


.block-list-4 .block-list__item:nth-child(4n) {
border: none;
}
   

.block-list-5 .block-list__item {
width: 20%;
}


.block-list-5 .block-list__item:nth-child(5n) {
border: none;
}
   

.block-list-6 .block-list__item {
width: 16.66%;
}


.block-list-6 .block-list__item:nth-child(6n) {
border: none;
}
}

<h2>2 column</h2>
<div class="block-list block-list-2">
<div class="block-list__item">1
</div>
<div class="block-list__item">2
</div>
<div class="block-list__item">3
</div>
<div class="block-list__item">4
</div>
<div class="block-list__item">5
</div>
<div class="block-list__item">6
</div>
</div>
<h2>3 column</h2>
<div class="block-list block-list-3">
<div class="block-list__item">1
</div>
<div class="block-list__item">2
</div>
<div class="block-list__item">3
</div>
<div class="block-list__item">4
</div>
<div class="block-list__item">5
</div>
<div class="block-list__item">6
</div>
</div>


<h2>4 column</h2>
<div class="block-list block-list-4">
<div class="block-list__item">1
</div>
<div class="block-list__item">2
</div>
<div class="block-list__item">3
</div>
<div class="block-list__item">4
</div>
<div class="block-list__item">5
</div>
<div class="block-list__item">6
</div>
</div>
<h2>5 column</h2>
<div class="block-list block-list-5">
<div class="block-list__item">1
</div>
<div class="block-list__item">2
</div>
<div class="block-list__item">3
</div>
<div class="block-list__item">4
</div>
<div class="block-list__item">5
</div>
<div class="block-list__item">6
</div>
</div>
<h2>6 column</h2>
<div class="block-list block-list-6">
<div class="block-list__item">1
</div>
<div class="block-list__item">2
</div>
<div class="block-list__item">3
</div>
<div class="block-list__item">4
</div>
<div class="block-list__item">5
</div>
<div class="block-list__item">6
</div>
</div>

小开

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

小开

尽管Flexbox即将出现缺口，但我将添加一个有效的解决方案。

它使用兄弟组合子检查2个条件。

它检查的第一个条件是元素是否位于div:nth-last-child(2)的倒数第二个位置

对于4列布局，我们需要检查位置2 &3. 检查它是否在4 div:nth-of-type(4n+2)的第二行或div:nth-of-type(4n+3)

的第三行

对于3列布局，我们只需要检查位置2

div:nth-of-type(3n+2)

然后我们可以像下面这样组合4列布局

div:nth-last-child(2) + div:nth-of-type(4n+2)


div:nth-last-child(2) + div:nth-of-type(4n+3)

我们还需要考虑一种边情况，任何3n+2 &4的倍数将得到右边框为35%的div:nth-last-child(2) + div:nth-of-type(4n+4)

3栏布局将

div:nth-last-child(2) + div:nth-of-type(3n+2)

然后我们需要给上面的选择器添加一个边距。右边的差额将需要计算，并将取决于弹性基制。

我添加了一个带有3列和4列的示例和一个媒体查询。我还添加了一个小的JavaScript按钮，添加了一个新的div，所以你可以检查它的工作。

这是一点CSS，但它的工作。如果你想要更多的解释，我也在我的网站上写过。 # EYZ0

var number = 11;


$("#add").on("click", function() {
number = number + 1;
$("#main").append("<div>" + number + "</div>");
});

body {
margin: 0;
}
main{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start; /* vertical */
justify-content: space-between;
min-width: 300px;
max-width: 1200px;
margin: 20px auto;
background-color: lightgrey;
height: 100vh;
}
div {
flex-basis: 30%;
background-color: #5F3BB3;
min-height: 20px;
height: 50px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
color: #9af3ff;
font-size: 3em;
}




div:nth-last-child(2) + div:nth-of-type(3n+2) {
background-color: #f1b73e;
margin-right: 35%;
}


@media screen and (min-width: 720px) {


div {
flex-basis: 22%;
}


div:nth-last-child(2) {
background-color: greenyellow;
}


div:nth-of-type(4n+2) {
background-color: deeppink;
}


/* Using Plus combinator is for direct sibling */
div:nth-last-child(2) + div:nth-of-type(4n+2) {
background-color: #f1b73e;
margin-right: 52%;
}


div:nth-last-child(2) + div:nth-of-type(4n+3) {
background-color: #f1b73e;
margin-right: 26%;
}


/* Also need to set the last to 0% to override when it become (3n+2)
* Any number that is 3n+2 & multiple of 4 will get the 35% margin-right
* div:nth-last-child(2) + div:nth-of-type(3n+2)
*/


div:nth-last-child(2) + div:nth-of-type(4n+4) {
background-color: #f1b73e;
margin-right: 0;
}


}

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My New Project</title>
</head>


<body>


<header>




</header>


<button id="add">Add</button>
<main id="main">


<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>




</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="action.js"></script>
</body>
</html>

小开

你还可以这样做:

.exposegrid:last-child {
margin-right: auto;
}

小开

这里有一些解决方案，人们建议编写精确的布局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>

小开

我发现了一个有效的解决方案，证明内容也可以居中/空间均匀/等等…(如果你知道单行中的条目数):

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>

标签的数量(它可以是任何其他标签)是每行中的项目数量减去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;
}

小开

如果你想在网格视图中对齐项目，即使是最后一个元素。确保卡片宽度为100% 使用下面的css。这工作得很好

.container {
/* ... snip ... */
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
justify-content: space-between;
grid-gap: 20px;
}

小开

我喜欢@Dan Andreasson的简单回答;@Robin Metral . .然而，它并不完全适用于我。

所以不要:

.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 */
}

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