flex布局实现满足一行两边对齐,不足一行靠左对齐

话不多说,上代码:

.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。这样,在项目不足一行时,该弹性项目会占据剩余的空间,从而使项目靠左对齐。

猜你喜欢

转载自blog.csdn.net/weixin_48309048/article/details/131396744