CSS Flex布局问题：如何让右侧元素与左侧首元素垂直对齐

我懂你的需求——现在你用垂直Flex布局排列元素，原本元素3是靠右对齐，但你希望它能和元素1保持水平对齐，而且不想用绝对定位，想靠Flex自身特性来实现对吧？

其实嵌套一层Flex容器就能完美解决这个问题，思路很简单：把每个子元素都放在一个水平方向的Flex容器里，这样每个元素的水平对齐都在独立的空间里进行，完全不会互相干扰。

解决方案代码 #

先看修改后的完整代码：

<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  /* 给外层容器加个宽度方便看效果，你可以根据实际需求调整 */
  width: 250px;
  border: 1px solid #ddd;
}

/* 每个子元素的外层包装容器，水平方向Flex */
.flex-item-wrap {
  display: flex;
  width: 100%; /* 占满外层容器宽度，确保每个对齐空间一致 */
}

.flex-item-wrap > div {
  background-color: #f1f1f1;
  width: 20px;
  margin: 10px;
  line-height: 20px;
}

/* 如果需要让某个元素靠右（比如你的示例里的元素2），给它的容器加这个类 */
.align-right {
  justify-content: flex-end;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item-wrap">
    <div>1</div>
  </div>
  <div class="flex-item-wrap align-right">
    <div>2</div>
  </div>
  <div class="flex-item-wrap">
    <div>3</div>
  </div>
</div>
</body>
</html>

为什么这样可行？ #

• 外层的.flex-container还是保持垂直方向的Flex，负责整体元素的垂直排列。
• 每个数字元素都被包裹在.flex-item-wrap这个水平Flex容器里，这个容器会占满外层的宽度，相当于给每个元素都分配了一个独立的“水平对齐区域”。
• 你可以给特定的容器加类（比如.align-right）来控制该区域内元素的对齐方式，而其他元素的对齐完全不受影响——这样元素3自然就和元素1保持了水平对齐，完全符合你的要求。

这种方案结构清晰，完全基于Flex布局的特性，没有用到绝对定位，维护起来也很方便。

内容的提问来源于stack exchange，提问作者d0n.key