flex布局主轴元素单独设置对齐方式

最新推荐文章于 2025-07-25 01:00:59 发布

原创最新推荐文章于 2025-07-25 01:00:59 发布 · 1.3w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#flex #css #布局

web 同时被 2 个专栏收录

14 篇文章

订阅专栏

css

9 篇文章

订阅专栏

本文介绍如何在Flex布局中实现部分元素右对齐而其余元素左对齐的效果。通过使用`flex-grow`属性配合`justify-content`属性，可以巧妙地解决这一布局难题。

今天用flex布局，想在主轴上设置某个flex-item右对齐，其他的左对齐，我以为直接用align-self属性就可以了，结果没效果，后来仔细阅读文档，发现align-self属性是用在单个元素的交叉轴的设置上，主轴元素没有找到设置单个元素的属性。
我要的效果是这样的（主轴方向为水平方向）
但是实际效果所有元素左对齐
于是我就对最右边的元素设置以下css就成功了

.inline-field.inline-field-add{
    flex-grow: 1;//这三个元素只有它在有空余空间时可伸缩，也就是它占据了所有剩余空间
    display: flex;//将它设置为flex,就可以单独对他进行主轴右对齐
    justify-content: flex-end;
}