在前端开发中，Flexbox 布局已经成为了解决页面布局问题的重要方式之一。而在使用 Flexbox 进行布局时，经常会遇到需要对布局中的项进行排序的情况。在本文中，我们将详细介绍在 Flexbox 布局下，如何对项进行排序，并提供示例代码供读者参考学习。
什么是 Flexbox 布局？
Flexbox 布局是一种用于页面布局的模型，其可以提供更加灵活的布局方式。在 Flexbox 布局中，布局的容器被称为 flex container，容器中包含的所有项目被称为 flex item。Flexbox 布局中有两个重要的属性：display: flex 和 flex，使用这些属性可以实现各种复杂的布局效果。
项的默认排序
在 Flexbox 布局中，默认情况下，每个 flex item 都会按照其在 HTML 中的顺序排列。即如果我们在 HTML 中先声明了第一个项，那么第一个项会在前面，后面的项会依次排列在其后面。
如何进行排序
在实际应用中，我们经常需要对 Flexbox 布局中的项进行排序。下面分别介绍了三种常见的排序方式。
1. 使用 order 属性
在 Flexbox 布局中，每个 flex item 都可以使用 order 属性进行排序。order 属性默认值为 0，可以为每个项目设置一个不同的值，值越小的项目会排在前面，值越大的项目会排在后面。例如：
<div class="container"> <div class="item" style="order: 2">2</div> <div class="item" style="order: 1">1</div> <div class="item" style="order: 3">3</div> </div>
在上面的示例中，我们设置了每个项目的 order 属性，将 2 排在了第一位，将 1 排在了第二位，将 3 排在了第三位。
2. 使用 flex-direction 属性
flex-direction 属性用于设置 flex container 中 flex item 的排列方向。默认值为 row，表示项目按照水平方向排列，从左到右。如果我们将 flex-direction 设置为 row-reverse，那么项目按照水平方向从右到左排列。例如：
<div class="container" style="flex-direction: row-reverse"> <div class="item">3</div> <div class="item">2</div> <div class="item">1</div> </div>
在上面的示例中，我们使用了 flex-direction: row-reverse，将项目的排列方向从左到右改为了从右到左。
3. 使用 align-self 属性
align-self 属性用于设置单个 flex item 在交叉轴方向上的对齐方式。默认值为 auto，表示继承父元素的 align-items 属性。如果我们将某个项目的 align-self 属性设置为 flex-start，那么该项目会排在交叉轴方向的起始位置。例如：
<div class="container" style="align-items: flex-start"> <div class="item" style="align-self: flex-start">1</div> <div class="item" style="align-self: auto">2</div> <div class="item" style="align-self: auto">3</div> </div>
在上面的示例中，我们将 flex container 的 align-items 属性设置为 flex-start，使得 flex item 在交叉轴方向上排列在起始位置，然后将第一个项目的 align-self 属性设置为 flex-start，使得它排在第一位。
总结
本文详细介绍了在 Flexbox 布局下如何对项进行排序，分别介绍了使用 order 属性、flex-direction 属性以及 align-self 属性进行排序的方法，并提供了示例代码作为参考。掌握这些技巧，可以帮助我们更好地使用 Flexbox 布局，并实现各种复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cee5c48841e98949a0f12