话不多说,上代码:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container:after {
content: "";
flex: auto;
}
上面的代码中,.container
是包含 Flex 项目的容器元素。通过将 justify-content
属性设置为 space-between
,项目会在一行中两边对齐。通过设置 flex-wrap
属性为 wrap
,使得项目能够换行。
然后,使用伪元素 :after
在容器末尾创建一个弹性项目,并将其设置为 flex: auto
。这样,在项目不足一行时,该弹性项目会占据剩余的空间,从而使项目靠左对齐。