如何在Flex布局行中实现一个左对齐一个右对齐的两个元素

问题原因 #

1. justify-items 是Grid布局专属属性，在Flex布局中完全不生效，用它控制Flex子元素位置是错误的。
2. 当前容器设置了 justify-content: center，该属性会让所有Flex子元素在水平方向整体居中，因此两张图片都处于容器中间位置。

解决方案 #

提供两种可靠的实现方式：

方式一：利用容器的 space-between 属性

直接修改容器的 justify-content 值，让子元素分别贴住容器左右边缘：

.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 替换原有的center */
}

HTML结构无需修改，修改后第一个图片左对齐容器左边缘，第二个图片右对齐容器右边缘，中间自动填充空白。

方式二：给右侧元素添加 margin-left: auto

如果需要更灵活的布局（比如后续中间可能添加其他元素），可以通过自动外边距把右侧元素推到最右边：

.flex-container {
    display: flex;
    align-items: center;
    /* 移除原有的justify-content: center */
}

.flex-item {
    margin-left: auto; /* 关键：自动填充左侧空白，将元素推到右侧 */
}

这种方式下，第一个元素默认左对齐，第二个元素被margin-left: auto强制推到容器右边缘。

补充说明 #

Flex布局中，控制子元素主轴对齐的核心属性：

• 容器层面：justify-content（控制所有子元素的整体分布）
• 子元素层面：margin: auto（自动填充剩余空间，实现单个元素的偏移）、align-self（控制单个元素的交叉轴对齐）

内容的提问来源于stack exchange，提问作者Jonathan Small