CSS Flexbox 布局是一种非常实用的前端布局方式，它可以让我们快速的创建灵活、自适应的页面布局。在使用 Flexbox 布局时，我们有时需要对子元素的顺序进行调整，这时候就需要使用 Flexbox 的排序功能。
实现子元素的排序
Flexbox 提供了三个属性用于实现子元素的排序：order、flex-grow 和 flex-shrink。下面我们具体介绍一下这三个属性：
order
order 属性用于定义子元素的显示顺序。这个属性接受一个数字作为值，默认为 0，数字越小表示越靠前，也就是越先显示。如果两个子元素具有相同的 order 值，则它们按照它们在 HTML 文档中的位置来显示。下面是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- - ------ - ------ -- - ------ - ------ -- -
在这个例子中，我们定义了一个 .container 父元素和两个 .item 子元素。由于 .item1 的 order 值为 2，.item2 的 order 值为 1，所以 .item2 会先于 .item1 显示。
flex-grow
flex-grow 属性用于定义子元素在可用空间中的放大比例。这个属性接受一个数字作为值，默认为 0，表示子元素不会被放大。如果所有的子元素具有相同的 flex-grow 值，则它们平分剩余空间。如果只有一个子元素具有 flex-grow 值，那么它会占据所有剩余空间。下面是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- - ------ - ---------- -- - ------ - ---------- -- -
在这个例子中，我们定义了一个 .container 父元素和两个 .item 子元素。由于 .item1 的 flex-grow 值为 2，.item2 的 flex-grow 值为 1，所以 .item1 会比 .item2 占据更多的空间。
flex-shrink
flex-shrink 属性用于定义子元素在空间不足时的缩小比例。这个属性接受一个数字作为值，默认为 1，表示子元素会被等比例缩小。如果所有的子元素具有相同的 flex-shrink 值，则它们平分缩小的空间。如果只有一个子元素具有 flex-shrink 值，那么它会占据所有缩小的空间。下面是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- - ------ - ------------ -- - ------ - ------------ -- -
在这个例子中，我们定义了一个 .container 父元素和两个 .item 子元素。由于 .item1 的 flex-shrink 值为 1，.item2 的 flex-shrink 值为 2，所以 .item2 会比 .item1 更容易被缩小。
总结
通过使用 Flexbox 的排序功能，我们可以很方便的对子元素进行排序和调整。除了 order、flex-grow 和 flex-shrink 属性外，Flexbox 还提供了很多其他实用的布局属性，如 flex-direction、justify-content 和 align-items 等。这些属性可以让我们快速的构建复杂的页面布局和交互效果。如果你还没有了解过 Flexbox 布局，建议你先去学习一下它的基本用法和属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ea29b48841e9894d045a5