justify-content 对齐问题描述
flex 布局中，justify-content 属性可以控制列表的水平对齐方式，例如 space-between 值可以实现两端对齐。
如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。
解决这个问题需要分为多种情况
- 如果每一行个数确定
- 模拟
space-between和间隙 - 根据个数最后一个元素动态
margin
- 模拟
- 如果每一子项宽度不固定
- 最后一项
margin-right:auto - 创建伪元素并设置
flex:auto或flex:1
- 最后一项
- 如果每一行列数不固定
- 如果列数不固定
HTML又不能调整
解决方案
如果每一行列数是固定的
通过 margin 模拟间隙
计算 margin-right （整体宽度 - 子项宽度 * 个数） / 间隙个数
<div id="wrap"></div>
* {
margin: 0;
padding: 0;
}
:root {
--width24: 24%;
--width48: 48%;
--width100: 100%;
}
#wrap {
display: flex;
flex-wrap: wrap;
}
.list {
width: var(--width24);
height: 100px;
background-color: skyblue;
margin-top: 15px;
}
.list:not(:nth-child(4n)) {
margin-right: calc(((100% - var(--width24) * 4) / 3));
}
const wrap = document.getElementById("wrap");
const fragment = document.createDocumentFragment();
for (let i = 0; i < 7; i++) {
const div = document.createElement("div");
div.setAttribute("class", "list");
fragment.appendChild(div);
}
wrap.appendChild(fragment);
如果考虑不同设备情况
<div id="wrap"></div>
* {
margin: 0;
padding: 0;
}
:root {
--width24: 24%;
--width48: 48%;
--width100: 100%;
}
#wrap {
display: flex;
flex-wrap: wrap;
}
.list {
height: 100px;
background-color: skyblue;
margin-top: 15px;
}
@media screen and (min-width: 1024px) {
.list {
width: var(--width24);
margin-top: 15px;
}
.list:not(:nth-child(4n)) {
margin-right: calc(((100% - var(--width24) * 4) / 3));
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.list {
width: var(--width48);
margin-top: 15px;
}
.list:not(:nth-child(2n)) {
margin-right: calc(100% - var(--width48) * 2);
}
}
@media screen and (min-width: 375px) and (max-width: 768px) {
.list {
width: var(--width100);
}
}
const wrap = document.getElementById("wrap");
const fragment = document.createDocumentFragment();
for (let i = 0; i < 7; i++) {
const div = document.createElement("div");
div.setAttribute("class", "list");
fragment.appendChild(div);
}
wrap.appendChild(fragment);
