页面布局，flex第二行元素左对齐

Question

我需要在使用flex布局时，自动换行后第二行的第一个元素与第一行的第一个元素垂直方向左对齐.第一行是固定间距然后justify-content:space-between;的布局，第二行是左对齐，最后一个元素右间距自动撑开，元素有固定宽高100×32

| Item 1 | Item 2 | Item 3 |
| Item 4 | Item 5 |

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你可以使用 Flexbox 的 align-items 属性来实现第二行元素与第一行元素的左对齐。

首先，确保第一行元素的容器设置了 display: flex 和 justify-content: space-between，这样可以实现固定间距和水平居中。

然后，在第二行元素的容器中设置 display: flex 和 align-items: flex-start，这样可以实现第二行元素的左对齐。

最后，在第二行元素的第一个子元素中添加 margin-left 属性，设置为与第一行元素的第一个子元素的左边距相同，这样可以实现第二行元素与第一行元素的左对齐。

以下是一个示例代码：

.container {
  display: flex;
  justify-content: space-between;
}

.second-row {
  display: flex;
  align-items: flex-start;
}

.second-row > div {
  margin-left: 20px; /* 设置与第一行元素的第一个子元素的左边距相同 */
}

这样，第二行元素的第一个子元素将与第一行元素的第一个子元素垂直方向左对齐。