CSS 提供了灵活的框布局模块，也称为flexbox ，可以更轻松地设计灵活的响应式布局。要开始使用flexbox模型，我们需要首先定义一个 flex 容器，容器的直接子元素称为 flex 项。
Flex 具有以下预定义的属性，以便更改 flex 项目的大小。
- 命令
- 弹性增长
- 弹性收缩
- 弹性基础
- 柔性
- 自我对齐
句法：
flex-item: order | flex-grow | flex-shrink |
flex-basis | auto | align-self |
flex | initial | inherit;示例代码：
HTML
A
B
C
HTML
A
B
C
HTML
A
B
C
HTML
A
B
C
D
E
F
HTML
A
B
C
HTML
A
B
C
HTML
A
B
C
输出：
1. order：这个属性可以用来指定flex项目的顺序。
示例：下面的代码说明了 flex order 的使用。
HTML
A
B
C
输出：
2. flex-grow：这个属性可以用来指定一个项目相对于容器中的其他项目可以增长多少。
示例：下面的代码说明了 flex-grow 属性值的使用。
HTML
A
B
C
输出：
3. flex-shrink：这个属性可以用来指定一个项目相对于容器中的其他项目可以收缩多少。其默认值为 1。
示例：下面的代码说明了 flex-shrink 属性值的使用。
HTML
A
B
C
D
E
F
输出：
4. flex-basis：这个属性可以用来指定flex容器中一个item的初始长度。
示例：下面的代码说明了 flex-basis 的使用。
HTML
A
B
C
输出：
5. flex：这个属性是flex-grow、flex-shrink和flex-basis的合集。您可以在 flex 中指定所有三个属性。
示例：下面的代码说明了 flex 的使用。
HTML
A
B
C
输出：
6. align-self：这个属性可以用来指定被选元素的对齐方式。定义后，它会覆盖容器定义的对齐方式。它采用以下值：center、flex-start 或 flex-end。
示例：下面的代码说明了 flex align-self 属性值的使用。
HTML
A
B
C
输出：
