是否存在类似align-self的CSS属性可在主轴对齐单个flex项？

在Flexbox布局中，justify-self属性确实会被忽略，这是Flexbox规范的设计逻辑——主轴的整体对齐由justify-content控制，而单个项的主轴对齐，官方推荐的方法是利用auto margins，这并非迂回方案，而是标准用法：

• 单个项靠主轴一端对齐：给目标flex项设置margin-left: auto（将项推到主轴右侧）或margin-right: auto（推到左侧）。示例代码：

.flex-container {
  display: flex;
  gap: 12px;
}
.target-item {
  margin-left: auto; /* 将该项及后续项推至主轴右侧 */
}

• 单个项与其他项分散对齐：如果需要让某个项和其余项分别占据主轴两端，仅给目标项添加单侧auto margin即可，其他项保持默认布局。

为什么没有类似align-self的主轴专属属性？因为Flexbox的主轴布局逻辑基于「弹性空间分配」，auto margin的机制已经能完美覆盖单个项的主轴对齐需求，这是规范刻意设计的，并非功能遗漏。

截至2024年，Flexbox规范在这部分没有更新，auto margins仍然是主轴单个项对齐的最优解。

内容的提问来源于stack exchange，提问作者Ryan R.