flex Css布局最后一行列表左对齐的方法总结
2022-02-19 本文已影响0人
skoll
问题概述
1 .justify-conetnt属性可以控制列表的水平对齐方式。比如space-between。如果最后一行列表的个数不满就会出现最后一行没有完全垂直对齐的问题
截屏2022-02-19 下午1.48.21.png
2 .主要有以下几种分类情况
1 .每一行列数是固定的
2 .每一项子项宽度不固定
3 .每一行列数不固定
4 .列数不固定，html又不能调整
3 .实现思路，基本所有的方法都是用margin或者空白元素占据右边的空白，从而来让现有的元素和上面的表现一致
每一行列数是固定的(每一行列数是固定的，子项宽度和容器宽度是固定大的)
1 .用margin模拟space-between的空格:这感觉是一个最常见的操作，都能想到的，只是用来复习下选择器而已。
.father{
width: 800px;
height:800px;
background-color: cornsilk;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.father div{
width: 150px;
height:210px;
background-color: yellowgreen;
margin-bottom:10px;
}
/* 每一行有5个元素 */
.father div:not(:nth-child(5n)){
/* nth-child(5n): 所有div都是5n,也就是最后一个元素*/
/* not:取反向，不是5n，也就是每一行前面的4个 */
/* 对这4个进行magin-right，最后一个不操作 */
background-color: rgb(58, 50, 205);
/* 把剩下所有的间距除4，因为有四个间隔,这里假设是10px */
margin-right:10px;
}
<div class="father">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
<div class="div">7</div>
<div class="div">8</div>
2 .根据个数的最后一个元素动态margin.还是主要复习选择器技术
1 .这个要写很多css选择器来匹配
.father{
width: 800px;
height:800px;
background-color: cornsilk;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
}
.father div{
width: 150px;
height:210px;
background-color: yellowgreen;
margin-bottom:10px;
}
.father div:last-child:nth-child(5n-1){
/* 最后一行,有4个元素:同时匹配这俩元素 */
}
.father div:last-child:nth-child(5n-2){
/* 最后一行有3个元素 */
margin-right: 325px;
}
.father div:last-child:nth-child(5n-3){
/* 最后一行有2个元素 */
}
.father div:last-child:nth-child(5n-4){
/* 最后一行有1个元素 */
margin-right:200px;
}
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
<div class="div">7</div>
<div class="div">8</div>
每一项宽度不固定
1 .方法1：最后一项margin-right:auto
2 .原理：margin:auto。用来计算元素对应方向应该获得的剩余空间大小
3 .填充规则
1 .如果一侧有值，另一侧是auto，那么auto取全部的剩余空间大小。前提是一侧必须有值.这里用的就是这一种
2 .如果两侧都是auto，那么会平分剩余空间大小
4 .实际代码
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 500px;
max-width: 100%;
}
.list {
background-color: skyblue;
margin: 10px;
}
.list:last-child{
margin-right:auto;
}
<div class="container">
<canvas class="list" width="40" height="50"></canvas>
<canvas class="list" width="60" height="30"></canvas>
<canvas class="list" width="50" height="60"></canvas>
<canvas class="list" width="70" height="30"></canvas>
<canvas class="list" width="80" height="50"></canvas>
<canvas class="list" width="70" height="70"></canvas>
<canvas class="list" width="60" height="50"></canvas>
<canvas class="list" width="40" height="50"></canvas>
<canvas class="list" width="50" height="60"></canvas>
<canvas class="list" width="70" height="30"></canvas>
<canvas class="list" width="80" height="50"></canvas>
</div>
5 .方法2：创建伪元素并且设置flex:auto.
1 .就是新建一个元素，flex:1就是占据剩余全部空间.这种固定宽度的也是可用的
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 500px;
max-width: 100%;
}
.list {
background-color: skyblue;
margin: 10px;
}
.container::after{
content:"";
flex:auto
}
<div class="container">
<canvas class="list" width="40" height="50"></canvas>
<canvas class="list" width="60" height="30"></canvas>
<canvas class="list" width="50" height="60"></canvas>
<canvas class="list" width="70" height="30"></canvas>
<canvas class="list" width="80" height="50"></canvas>
<canvas class="list" width="70" height="70"></canvas>
<canvas class="list" width="60" height="50"></canvas>
<canvas class="list" width="40" height="50"></canvas>
<canvas class="list" width="50" height="60"></canvas>
<canvas class="list" width="70" height="30"></canvas>
<canvas class="list" width="80" height="50"></canvas>
</div>
每一行列数不固定
1 .就是宽度会动态变化的时候。只有一种方式.用空白元素占位。只需要最大宽度个数的i空白元素即可，不需要高度，只需要宽度和margin加起来的值和正常元素一样即可
截屏2022-02-19 下午3.35.30.png
3 .此处用了5个i元素来补全，实际只用了3个补全，剩下的俩个在下一行一左一右还是按照space-between的方式排列了。最大数量的保证我们征程需要补全的量是足够的，多出的都会下一行显示，但是这里我们是看不到的，所以没有影响
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 500px;
max-width: 100%;
}
.list {
background-color: skyblue;
margin: 10px;
width:50px;
height:50px;
}
.container>i{
width:50px;
margin:10px;
}
<div class="container">
<canvas class="list" ></canvas>
<canvas class="list" ></canvas>
<canvas class="list" ></canvas>
<canvas class="list" ></canvas>
<canvas class="list"></canvas>
<canvas class="list" ></canvas>
<canvas class="list"></canvas>
<canvas class="list" ></canvas>
<canvas class="list" ></canvas>
<canvas class="list" ></canvas>
<canvas class="list"></canvas>
<i></i><i></i><i></i><i></i><i></i>
</div>
实现方法点评
1 .最佳实现是css grid布局，但是repeat函数有兼容性。还有就是这种新技术还是不现实。现在大部分连flex布局都没用上
