flex布局最后一行列表左对齐

[songning0605]

在 CSS flex 布局中，当设置 justify-content: space-between 的时候，可以实现两端对齐。但是，如果最后一行的列表个数不满，就会出现最后一行没有和上边的行垂直对齐的问题。

实现思路是这样的

1. n 列布局，列宽度为 (100/n - 1)%，每一列留出 1% 的宽度进行 margin 分配，这样保证了每一列宽度的一致性。
2. 在进行 margin 分配的时候，忽略最后一列，所以margin的宽度是 n%/(n-1)，保证列间隔的一致性。
3. 如果最后一行个数不满 n，设置最后一项的 margin-right 为 auto，把剩余宽度全部设置为margin。

假设要用 flex 实现4列布局

先看一下效果

html代码如下

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

css代码如下

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

.item{
    /* 宽度不能占满100%，需要给margin留出一定宽度 */
    width: 24%; /* 4列就是(100/4 - 1)% = 24%，以此类推 */
    height: 100px;
    background-color: blue;
    margin-top: 8px;
}

/* 剩余宽度按(n-1)列平均分配，在这里就是3，最后一列不设置margin */
.item:not(:nth-child(4n)) {
    margin-right: calc(4% / 3); /* 4列就是4% / (4 - 1) = 4% / 3，以此类推 */
}

/* flex容器最后一项设置 margin:auto */
.item:last-child{
  margin-right: auto;
}

[songning0605]

flex 基础知识再整理

设置为 flex 容器

display: flex; /* flex | inline-box */

容器属性

flex-direction /* 轴线方向，row | row-reverse | column | column-reverse */
flex-wrap /* 一条轴线排不下，now-wrap | wrap | wrap-reverse */
flex-flow /* flex-direction和flex-wrap的缩写 */
justify-content /* 定义了项目在横轴上的对齐方式 flex-start | flex-end | center | space-between | space-around*/
align-items /* 定义了项目在纵轴上的对齐方式，flex-start | flex-end | center | baseline | stretch*/
align-content /* 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，flex-start | flex-end | center | space-between | space-around | stretch */