gird布局解决最后一行数量不对布局问题

一、justify-content对齐问题描述
在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。

但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。

如下代码：

.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
然后列表的个数不多不少正好7个：

此时最后一行的小方块的排列就显得很尴尬了：

您可以狠狠地点击这里：最后一行flex列表没有对齐demo

此时，最后一行应该左对齐排列才是我们想要的效果，如何实现呢？

其实实现的思路和display:inline-block的两端对齐是一样的。

二、如果每一行列数是固定的
如果每一行列数是固定的，则下面两种方法可以实现最后一行左对齐。

方法一：模拟space-between和间隙

也就是我们不使用justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。

例如：

.container {
display: flex;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
.list:not(:nth-child(4n)) {
margin-right: calc(4% / 3);
}
此时，布局效果是这样的：

方法二：根据个数最后一个元素动态margin

由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。

例如，假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的。

然后，借助树结构伪类数量匹配技术（这篇文章“伪类匹配列表数目实现微信群头像CSS布局的技巧”中的布局技巧就是借助这种技术实现），我们可以知道最后一行有几个元素。

例如：

.list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素……
.list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素……
在本例中，一行就4个元素，因此，我们可以有如下CSS设置：

.container {
display: flex;
/* 两端对齐 /
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
/ 如果最后一行是3个元素 /
.list:last-child:nth-child(4n - 1) {
margin-right: calc(24% + 4% / 3);
}
/ 如果最后一行是2个元素 */
.list:last-child:nth-child(4n - 2) {
margin-right: calc(48% + 8% / 3);
}
效果如下GIF示意，删除列表后，布局依然稳稳地左对齐。

三、如果每一子项宽度不固定
有时候，每一个flex子项的宽度都是不固定的，这个时候希望最后一行左对齐该如何实现呢？

由于此时间隙的大小不固定，对齐不严格，因此，我们可以直接让最后一行左对齐即可。具体方法有两个：

方法一：最后一项margin-right:auto

CSS代码如下：

.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
margin-right: auto;
}
最终效果如下GIF：

方法二：创建伪元素并设置flex:auto或flex:1

CSS代码如下：

.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 使用伪元素辅助左对齐 /
.container::after {
content: ‘’;
flex: auto; / 或者flex: 1 */
}
最终效果如下GIF：

四、如果每一行列数不固定
如果每一行的列数不固定，则上面的这些方法均不适用，需要使用其他技巧来实现最后一行左对齐。

这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。

如下HTML示意：

相关CSS如下，实现的关键就是占位的 元素宽度和margin大小设置得和.list列表元素一样即可，其他样式都不需要写。

.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-right: -10px;
}
.list {
width: 100px; height:100px;
background-color: skyblue;
margin: 15px 10px 0 0;
}
/* 和列表一样的宽度和margin值 */
.container > i {
width: 100px;
margin-right: 10px;
}
由于元素高度为0，因此，并不会影响垂直方向上的布局呈现。

最后的效果如下GIF图示：

五、如果列数不固定HTML又不能调整
然而有时候，由于客观原因，前端重构人员没有办法去调整html结构，同时布局的列表个数又不固定，这个时候该如何实现我们最后一行左对齐效果呢？

我们不妨可以试试使用Grid布局。

Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。

CSS代码如下：

.container {
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 10px;
}
.list {
width: 100px; height:100px;
background-color: skyblue;
margin-top: 5px;
}
可以看到CSS代码非常简洁。

HTML代码就是非常规整非常普通的代码片段：

最后的效果如下GIF： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210628161854351.gif#pic_center)

gird布局解决最后一行数量不对布局问题相关推荐

flex布局自动换行并解决最后一行对齐
flex布局自动换行并解决最后一行对齐实现效果: html代码(父级容器里面有5个子级盒子) css实现对齐效果: .flex-wrp {display: flex;justify-content: ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
flex 换行布局，最后一行不满时问题处理
flex 换行布局,最后一行不满时问题处理如图(借用别人的)所时,flex-wrap: wrap; justify-content: space-between; 时造成的问题: 但是我们期望的是这 ...
如何解决ios横竖屏切换布局错乱的问题
如何解决ios横竖屏切换布局错乱的问题可以使用 location.reload(); 强制刷新页面 mounted () {// 监听 resize 方法window.addEventListene ...
在布局空间标注的尺寸量不对_cad布局标注和模型尺寸不对
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. cad布局标注和模型尺寸不对的原因: 1.因为标注的线性比例设置不同,重新设置一下即可. 2.布局比例不一致,在布局空间画图是用布 ...
CSS float影响其他元素布局解决方法
float会脱离文档流,会影响下一元素和父级元素布局解决方法:float用完后加:<div style="clear: both"></div> 例: & ...
android布局优化方案,Android启动优化-布局优化
Android启动优化-布局优化安卓应用开发发展到今天,已经成为一个非常成熟的技术方向,从目前的情况看,安卓开发还是一个热火朝天的发展,但高级人才却相对较少,如今移动互联网的开发者也逐渐开始注重插入 ...
html木桶布局,CSS3如何实现图片木桶布局？（附代码）
本篇文章给大家通过代码示例介绍一下使用CSS3实现图片木桶布局的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 高度相同,而宽度不一样的布局,称之为木桶布局.它有几个鲜明的特点 ...
css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
android布局优化工具,详解Android布局优化
怎样才能写出优秀的Android App,是每一个程序员追求的目标.那么怎么才能写出一个优秀的App呢?相信很多初学者也会有这种迷茫.一句话来回答这个问题:细节很重要.今天我们就从最基础的XML布局来 ...

gird布局解决最后一行数量不对布局问题

gird布局解决最后一行数量不对布局问题相关推荐

最新文章

热门文章

gird布局解决 最后一行数量不对布局问题

gird布局解决 最后一行数量不对布局问题相关推荐

最新文章

热门文章

gird布局解决最后一行数量不对布局问题

gird布局解决最后一行数量不对布局问题相关推荐