Flexbox 是一种用于布局的 CSS3 模块，它可以让开发者更加灵活地控制元素的排列方式。在 Flexbox 中，有许多属性可以用来控制元素的位置、大小和间距等。本文将详细讲解其中的 align-self、order、flex-grow 等属性，并提供示例代码，帮助读者更好地理解这些属性的用法。
align-self 属性
align-self 属性用于控制单个项目在交叉轴上的对齐方式。它可以覆盖容器的 align-items 属性。align-self 可以取以下值：
- auto：默认值，表示继承父元素的 align-items 属性。
- flex-start：项目顶部与容器交叉轴的起点对齐。
- flex-end：项目底部与容器交叉轴的终点对齐。
- center：项目在交叉轴居中对齐。
- baseline：项目的第一行文字的基线对齐。
- stretch：项目在交叉轴上拉伸以适应容器的高度。
示例代码：
.container {
display: flex;
align-items: center;
}
.item {
align-self: flex-end;
}上面的代码中，容器采用了 flex 布局，并设置了 align-items 属性为 center。但是，其中的一个项目 item 使用了 align-self 属性，覆盖了容器的 align-items 属性，使其在交叉轴上底部对齐。
order 属性
order 属性用于控制项目的排列顺序。它可以为每个项目指定一个整数值，数值越小，排列越靠前。如果没有设置 order 属性，则默认为 0。示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- - ------------------ - ------ -- - ------------------ - ------ -- -
上面的代码中，容器采用了 flex 布局，并没有指定项目的排列顺序。但是，其中的两个项目分别使用了 order 属性，使得它们的排列顺序颠倒。
flex-grow 属性
flex-grow 属性用于控制项目的放大比例。它可以为每个项目指定一个非负数值，表示项目在剩余空间中所占的比例。如果所有项目的 flex-grow 属性都为 1，则它们将平均分配剩余空间。如果某个项目的 flex-grow 属性为 2，而其他项目的 flex-grow 属性都为 1，则前者所占比例为后者的两倍。示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- - ------------------ - ---------- -- - ------------------ - ---------- -- -
上面的代码中，容器采用了 flex 布局，并没有指定项目的宽度。但是，其中的两个项目分别使用了 flex-grow 属性，使得它们在剩余空间中所占比例不同，从而实现了不同的宽度。
总结
Flexbox 是一种非常灵活的布局方式，可以让开发者更加自由地控制元素的排列方式。本文详细讲解了其中的 align-self、order、flex-grow 等属性，并提供了示例代码，帮助读者更好地理解这些属性的用法。希望读者能够通过本文的学习，更加熟练地运用 Flexbox 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662f220fd3423812e4d194a0