弹性盒子属性和属性值的范围
1. 弹性盒子属性
弹性盒子属性是应用于弹性容器的属性，用于控制容器的布局和对齐方式，包括以下属性：
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
2. 弹性项目属性
弹性项目属性是应用于弹性项目的属性，用于控制项目的布局和对齐方式，包括以下属性：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
3. 属性值及对应效果
1. display: flex
将元素设置为弹性容器，使内部的弹性项目能够实现弹性布局。这个属性通常用于父容器上。
2. flex-direction: row | column
设置主轴的方向，分别对应水平方向和垂直方向。通常用于父容器上。
3. flex-wrap: nowrap | wrap | wrap-reverse
控制弹性项目是否换行，分别为不换行、换行和反向换行。通常用于父容器上。
4. flex-flow: <flex-direction> || <flex-wrap>
是flex-direction和flex-wrap两个属性的简写形式，用于一次性设置这两个属性的值。flex-direction表示主轴方向，flex-wrap表示是否换行。
5. justify-content: flex-start | flex-end | center | space-between | space-around
控制弹性项目在主轴上的对齐方式，分别为左对齐、右对齐、居中对齐、两端对齐和环绕对齐。通常用于父容器上。
6. align-items: flex-start | flex-end | center | baseline | stretch
控制弹性项目在交叉轴上的对齐方式，分别为顶部对齐、底部对齐、居中对齐、基线对齐和拉伸对齐。通常用于父容器上。
7. align-content: flex-start | flex-end | center | space-between | space-around | stretch
控制弹性项目在交叉轴上的分布方式，分别为顶部对齐、底部对齐、居中对齐、两端对齐、环绕对齐和拉伸对齐。只有在有多行弹性项目时才会生效。通常用于父容器上。
8. order: number
控制弹性项目的排列顺序。可以设置一个整数值，值越小的弹性项目排在越前面。通常用于弹性项目上。
9. flex-grow: number
控制弹性项目的放大比例。可以设置一个非负数值，表示弹性项目在剩余空间中所占的比例。通常用于弹性项目上。
10. flex-shrink: number
控制弹性项目的缩小比例。可以设置一个非负数值，表示弹性项目在空间不足时所占的比例。通常用于弹性项目上。
11. flex-basis: length | auto
设置弹性项目在主轴上的基础尺寸。可以设置一个长度值或auto关键字。通常用于弹性项目上。
12. flex: flex-grow flex-shrink flex-basis
综合设置弹性项目的放大比例、缩小比例和基础尺寸。通常用于弹性项目上。
13. align-self: auto | flex-start | flex-end | center | baseline | stretch
控制单个弹性项目在交叉轴上的对齐方式，如果和align-items属性同时设置，则以align-self的设置为准。通常用于弹性项目上。
这些属性通常与弹性盒子布局一起使用，用于控制弹性容器和弹性项目的布局和对齐方式，实现各种不同的布局效果。
