|
flex布局对齐方式设置space-between，将最后一行元素左对齐
ElPsyCongr:
[code=css]
.text-last-left {
word-break: break-all;
text-align: justify;
text-align-last: left;
}
.flex-last-left {
--row: 1;
--gap: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: var(--gap);
margin: 0 calc(-1 * var(--gap) / 2);
}
.flex-last-left>* {
flex: 0 0 calc(100% / var(--row) - var(--gap));
margin: 0 calc(var(--gap) / 2);
}
.flex-last-left::after {
content: '';
flex: 1;
}
.grid-last-left {
--child-width: 100px;
--gap: 0;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, var(--child-width));
grid-gap: var(--gap);
}
.flex-last-left>* {
background-color: red;
}
.grid-last-left>* {
background-color: blue;
}
[/code]
|