flex布局最后一行左对齐
随着flex布局的流行，我们工作中也免不了用flex布局，在使用flex布局的时候，大家应该也和我一样遇到过justify-content:space-between最后一行左对齐的问题，于是这篇文章专门整理了一下
第一种：一行三列的情况
style统一样式
* {
margin: 0;
padding: 0;
}
div {
padding: 20px;
width: 500px;
margin: 0 auto;
}
.title {
text-align: center;
}
.sub_title{
margin: 20px 0px;
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
html部分
<div>
<h2 class="title">flex布局最后一行左对齐</h2>
<h3 class="sub_title">一行三列的情况</h3>
<ul class="list list1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
一行三列CSS部分
.list1 li {
padding: 0;
margin: 0;
list-style: none;
width: 30%;
min-height: 36px;
background-color: #12a8ff;
margin-bottom: 10px;
}
.list1 li:last-child:nth-child(3n + 2) {
background: hotpink;
margin-right: calc((100% - 30%) / 2);
}
效果展示图：
image.png
第二种：一行四列的情况
html部分：
<div>
<h3 class="sub_title">一行四列的情况</h3>
<ul class="list list2 ">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
/* 一行四列多余三个 */
<!-- <li></li> -->
</ul>
</div>
一行四列CSS部分：
.list2 li {
padding: 0;
margin: 0;
list-style: none;
width: 24%;
min-height: 36px;
background-color: #12a8ff;
margin-bottom: 10px;
}
/* 一行四列多余两个 */
.list2 li:last-child:nth-child(4n+2) {
background-color: orange;
margin-right: calc((100% - 24%) / 3 * 2);
}
/* 一行四列多余三个 */
.list2 li:last-child:nth-child(4n+3) {
background-color: pink;
margin-right: calc((100% - 24%) / 3 * 1);
}
效果图：
image.png
第三种：一行五列的情况
html部分：
<div>
<h3 class="sub_title">一行5列的情况</h3>
<ul class="list list3">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
一行五列CSS部分：
.list3 li {
padding: 0;
margin: 0;
list-style: none;
width: 18%;
min-height: 36px;
background-color: #12a8ff;
margin-bottom: 10px;
}
.list3 li:last-child:nth-child(5n+2) {
background-color: orangered;
margin-right: calc((100% - 18%) / 4 * 3);
}
.list3 li:last-child:nth-child(5n+3) {
background-color: hotpink;
margin-right: calc((100% - 18%) / 4 * 2);
}
.list3 li:last-child:nth-child(5n+4) {
background-color: blueviolet;
margin-right: calc((100% - 18%) / 4 * 1);
}
效果图：
image.png
第四种：一行不固定情况
html部分：
<div>
<h3 class="sub_title">一行不固定的情况</h3>
<ul class="list list5">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
一行不固定CSS部分：
.list5 {
display: grid;
grid-template-columns: repeat(auto-fill, 80px);
grid-gap: 10px;
}
.list5 li {
padding: 0;
margin: 0;
list-style: none;
width: 80px;
min-height: 36px;
background-color: #12a8ff;
margin-bottom: 10px;
}
效果图：
image.png
附：flex布局兼容的浏览器
image.png
