伸缩盒子是CSS3中提供的一种全新的布局方式，通过使用 display: flex 属性可以将一个容器转换为一个容器盒子，其中的子元素则被称为子盒子。伸缩盒子的最大特点是能够灵活的进行盒子的分布、对齐和排序，使得前端开发者能够更加方便的布局HTML元素，适应不同的设备和屏幕大小。
本文主要讲解如何使用CSS Flexbox实现对伸缩盒子子元素的分组排序。通过本文的学习，读者将了解到以下内容：
- 什么是CSS Flexbox
- 如何使用CSS Flexbox对伸缩盒子进行布局
- 如何对伸缩盒子子元素进行分组排序
1. 什么是CSS Flexbox
CSS Flexbox（弹性盒子）是CSS3中提供的一种全新的布局方式，作为CSS的一种模块，它和传统模块的区别是实现了子元素的灵活分布、对齐和排序，使得前端开发者能够更加方便的布局HTML元素，适应不同的设备和屏幕大小。
CSS Flexbox最大的特点是使用容器的 display: flex 属性可以将整个容器转换为一个伸缩盒子，其中的子元素则被称为伸缩盒子子元素。这些子元素会按照父元素的布局要求，以可伸缩的方式进行分布，并且可以设置不同的排列方式、排序属性、对齐方式等等。
除此之外，CSS Flexbox还支持多种方向的布局：从左到右、从右到左、从上到下、从下到上。开发者可以通过设置 flex-direction 属性来调整伸缩盒子的方向。
2. 如何使用CSS Flexbox对伸缩盒子进行布局
使用CSS Flexbox对伸缩盒子进行布局非常简单，只需要在父元素中添加 display: flex 属性即可将父元素变成一个伸缩盒子。子元素则会自动适应父元素的布局要求，可以通过设置各种属性来调整子元素的样式和排列方式。
以下是一个简单的伸缩盒子布局示例代码：
<div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ------ ------ ------- ------ ------- ----- - ------ - ----------------- ---- - ------ - ----------------- ------ - ------ - ----------------- ----- - ------ - ----------------- ------- -
上述代码中，我们在父元素 .container 中添加了 display: flex 属性，并且调整了布局方向为纵向分布（默认为横向分布）。同时，我们还设置了子元素 .item 的宽度、高度、边距和背景颜色，使其呈现出4个不同颜色的正方形。
其中，.container 的 flex-wrap: wrap 属性可以使得子元素在子行不够容纳时自动换行，而 justify-content 和 align-items 属性则是可以用来设置子元素在父元素中的横向和纵向对齐方式。更多关于CSS Flexbox布局的属性和使用方式请参考W3C标准文档。
3. 如何对伸缩盒子子元素进行分组排序
CSS Flexbox还支持一种非常实用的功能：对伸缩盒子子元素进行分组排序。通过设置 order 属性，我们可以将一个或多个子元素设置为具有更小或更大的序号，实现不同序号的子元素进行分组排序的效果。
以下是一个简单的伸缩盒子排序示例代码：
<div class="container"> <div class="item item1" style="order: 3;"></div> <div class="item item2" style="order: 2;"></div> <div class="item item3" style="order: 4;"></div> <div class="item item4" style="order: 1;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ------ ------ ------- ------ ------- ----- - ------ - ----------------- ---- - ------ - ----------------- ------ - ------ - ----------------- ----- - ------ - ----------------- ------- -
上述代码中，我们使用 order 属性将 .item4 设置为第一位，.item2 设置为第二位，.item1 设置为第三位，.item3 设置为第四位。从而实现了四个子元素的分组排序效果。
使用CSS Flexbox对伸缩盒子子元素进行分组排序的优点包括：
- 简化代码：不需要额外的 HTML结构和样式代码就可以实现分组排序的效果。
- 响应式布局灵活：通过设置
flex-grow属性，可以让子元素根据屏幕宽度自动进行伸缩，实现响应式布局。
结论
CSS Flexbox是一种非常实用的CSS布局方式，通过使用 display: flex 属性可以将一个容器轻松转换为一个伸缩盒子。使用CSS Flexbox对伸缩盒子进行分组排序时，只需使用 order 属性即可让子元素根据需要进行排序。通过应用CSS Flexbox，开发者可以更加轻松地布局HTML元素，提高开发效率，适应不同的设备和屏幕大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbcbf24471362601634746