Flex布局下如何对齐两个容器中元素，且保持第一个容器的`justify-content: space-between`属性不变？

在Flex布局中，如果你想要对齐两个容器中的元素，并且保持第一个容器的justify-content: space-between属性不变，可以通过以下步骤实现：

1. 保持第一个容器的justify-content: space-between

第一个容器的justify-content: space-between属性会将子元素均匀分布在容器中，第一个元素靠左，最后一个元素靠右，中间的元素均匀分布。

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

2. 对齐第二个容器中的元素

为了对齐第二个容器中的元素，你可以使用align-items属性来控制垂直对齐，或者使用justify-content来控制水平对齐。

假设你想要第二个容器中的元素与第一个容器中的元素在垂直方向上对齐，你可以使用align-items: center：

.container2 {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

3. 保持两个容器的宽度一致

为了确保两个容器中的元素对齐，你可能需要确保两个容器的宽度一致。你可以通过设置相同的宽度或者使用flex-grow属性来实现。

.container1, .container2 {
    width: 100%; /* 或者设置相同的固定宽度 */
}

4. 示例代码

以下是一个完整的示例代码：

<div class="container1">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
<div class="container2">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
</div>

.container1, .container2 {
    display: flex;
    width: 100%;
}

.container1 {
    justify-content: space-between;
}

.container2 {
    align-items: center; /* 垂直居中对齐 */
}

5. 进一步调整

如果你需要更精确的对齐，比如让第二个容器中的元素与第一个容器中的元素在水平方向上对齐，你可以使用justify-content属性来调整第二个容器的水平对齐方式。

.container2 {
    justify-content: space-between; /* 水平对齐方式 */
}

总结

通过保持第一个容器的justify-content: space-between属性不变，并使用align-items和justify-content来调整第二个容器的对齐方式，你可以实现两个容器中元素的对齐。确保两个容器的宽度一致也是关键。