Css中flex布局

CSS中的flex布局是一种用来进行页面布局的弹性盒子模型，它可以让容器中的子元素自动排列并具备自适应的能力。通过对容器和子元素进行设置，我们可以轻松实现各种复杂的布局效果。在使用flex布局时，我们需要先定义一个容器（display: flex），然后再给容器内的子元素设置一些属性（比如：flex-grow、flex-shrink、flex-basis、align-self等）来实现相应的布局效果。

常用的flex属性包括：
1. flex-direction：设置主轴方向（row、row-reverse、column、column-reverse）
2. justify-content：定义主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）
3. align-items：定义交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）
4. align-self：定义单个项目在交叉轴上的对齐方式
5. flex-wrap：定义是否换行（nowrap、wrap、wrap-reverse）
6. flex-flow：同时设置flex-direction和flex-wrap属性
7. order：定义项目的排列顺序
8. flex-grow：定义项目的放大比例
9. flex-shrink：定义项目的缩小比例
10. flex-basis：定义项目的基准大小