flex的3行3例
1. Flexbox布局是一种弹性盒子模型，可以帮助我们轻松地构建响应式布局。它使用了弹性容器和弹性项的概念，可以自动调整项目的尺寸和位置。
2. 使用flex属性可以控制弹性项的宽度和高度，通过设置flex-grow、flex-shrink和flex-basis属性，可以调整项目在弹性容器中的尺寸。
3. 通过设置flex-direction属性，可以指定项目在弹性容器中的排列方向，包括水平方向和垂直方向。常见的属性值有row、column、row-reverse和column-reverse。
4. 使用flex-wrap属性可以控制项目是否换行显示。默认情况下，项目会自动调整大小以适应弹性容器，但是通过设置flex-wrap属性为wrap，可以使项目在需要时换行显示。
5. 使用align-items属性可以控制项目在弹性容器的交叉轴上的对齐方式，包括顶部对齐、底部对齐、居中对齐等。
6. 使用justify-content属性可以控制项目在弹性容器的主轴上的对齐方式，包括左对齐、右对齐、居中对齐等。
7. 使用align-self属性可以单独地控制每个项目在交叉轴上的对齐方式，可以覆盖align-items属性的设置。
8. 使用order属性可以调整项目的顺序，数值越小的项目越靠前。这可以灵活地改变项目在弹性容器中的排列顺序。
9. 使用flex-grow属性可以指定项目的增长比例，可以根据剩余空间自动调整项目的尺寸。
10. 使用flex-shrink属性可以指定项目的收缩比例，可以根据空间不足自动调整项目的尺寸。
11. 使用flex-basis属性可以指定项目在弹性容器中的初始尺寸，可以是固定的像素值或者相对于父容器的百分比。
12. flex属性是flex-grow、flex-shrink和flex-basis属性的缩写形式。通过设置flex属性，可以同时设置这三个属性的值。
flex布局对齐方式
13. 使用align-content属性可以控制多行项目在弹性容器的交叉轴上的对齐方式，用于控制多行项目的间距和对齐方式。
14. 使用flex-flow属性可以同时设置flex-direction和flex-wrap属性，方便地指定项目的排列方向和换行方式。