Flexbox布局：flex-direction:column下无需定位实现元素居右

嘿，这个问题其实用Flexbox自带的属性就能轻松解决，完全不需要用到定位属性，我给你拆解一下：

核心逻辑 #

当你把容器的flex-direction设为column时，Flexbox的主轴变成了垂直方向（子元素默认从上到下排列），而我们要控制的水平位置属于交叉轴。所以要让子元素在水平方向靠右，只需要操作交叉轴的对齐属性就行。

统一让所有子元素靠右的方案 #

给容器添加align-items: flex-end，这会让所有子元素在交叉轴（水平方向）上靠右对齐。修改后的代码如下：

CSS代码

body { margin: 0; background-color: rgb(247, 176, 232); }
.container { 
  display: flex; 
  flex-direction: column; 
  height: 150px; /* 我把高度调大了点，方便你看清效果 */
  align-items: flex-end; /* 这就是关键属性！ */
  width: 100%; /* 确保容器占满父元素宽度，不然靠右效果不明显 */
}
.box { 
  background-color: red; 
  height: 20px; 
  width: 50%; 
}

HTML代码

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

单独控制某个子元素的对齐 #

如果你不想所有子元素都靠右，只想让特定的几个子元素靠右，那给对应的子元素加align-self: flex-end就可以了，比如：

.box:nth-child(2) {
  align-self: flex-end; /* 只有第二个盒子靠右 */
}

剩下的子元素会默认保持align-self: auto，也就是继承容器的align-items设置。

小提示 #

一定要确保你的容器宽度足够（比如设width:100%），不然如果容器本身很窄，你可能看不到明显的靠右效果哦~

内容的提问来源于stack exchange，提问作者Lichay Tiram