让CSS f⊙ω⊙lex合理布局最终一队伍表左两端对齐

2021-03-23 12:04 jianzhan

引入张鑫旭的一一篇文章共享给大伙儿，假如你要开展改动进到连接点到相匹配的照片转化成的连接进到，即可改动。

难题叙述

//html
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>
//css
.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}

这类状况显著与大家要想的状况不一样。

行数固定不动处理方式

方式一 用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个原素，要不七个原素……
  • .list:last-child:nth-child(4n - 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);
}
/* 假如最终一行是两个原素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

展现的状况以下

即便你干了删掉实际操作，依然是完好无损的款式。这一点很钦佩

方式三 假如子原素的总宽不固定不动

这一就难以解决，可是依然有处理方式，程序简直越来越越有趣。
这一情况下用上面的那类方式就较为艰难了，由于总宽不固定不动不可以依据总宽测算出margin的值

（1）最终一项margin-right：auto；

.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;
}

（2）建立伪原素并设定flex:auto或flex:1

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* 应用伪原素輔助左两端对齐 */
.container::after {
    content: '';
    flex: auto;    /* 或是flex: 1 */
}

四、假如每一队伍数不固定不动

//HTML编码：
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i><i></i>//比div少一个就可以!
</div>
//CSS编码：
.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;
}
.container > i {
    width: 100px;
    margin-right: 10px;
}

到此这篇有关让CSS flex合理布局最终一队伍表左两端对齐的N种方式(总结)的文章内容就详细介绍到这了,大量有关CSS flex最终一队伍表左两端对齐內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

为您推荐