CSS 实现 flex布局最后一行左对齐的方案「多场景、多方案」

作者：System 时间：2024年08月09日分类：所有,css 字数：383

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。




.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左对齐 */
  align-content: flex-start; /* 多行时每行左对齐 */
}
 
.item {
  flex: 0 0 auto; /* 根据需要设置宽度 */
  margin: 5px; /* 间距 */
  /* 其他样式 */
}

这段代码展示了如何使用flex布局实现容器中项目的左对齐排列，即最后一行左对齐。justify-content: flex-start;确保了水平方向上的左对齐，而align-content: flex-start;在多行的情况下确保了垂直方向每行的左对齐。

CSS 实现 flex布局最后一行左对齐的方案「多场景、多方案」

评论已关闭

推荐阅读