弹性布局display：flex常用属性

在CSS中，使用display：flex可以创建一个弹性布局容器，其子元素将成为弹性项目。以下是display：flex的一些常用属性：

1. flex-direction：定义主轴的方向。默认值为row，表示主轴从左到右水平排列。其他可选值包括row-reverse（主轴从右到左水平排列）、column（主轴从上到下垂直排列）和column-reverse（主轴从下到上垂直排列）。
2. flex-wrap：定义当弹性项目超出容器时是否换行。默认值为nowrap，表示不换行。其他可选值包括wrap（换行，第一行在上方）和wrap-reverse（换行，第一行在下方）。
3. justify-content：定义弹性项目在主轴上的对齐方式。默认值为flex-start，表示项目向主轴起点对齐。其他可选值包括flex-end（项目向主轴终点对齐）、center（项目在主轴中点对齐）、space-between（项目在主轴上平均分布）和space-around（每个项目两侧的间隔相等）。
4. align-items：定义弹性项目在交叉轴上的对齐方式。默认值为flex-start，表示项目向交叉轴起点对齐。其他可选值包括flex-end（项目向交叉轴终点对齐）、center（项目在交叉轴中点对齐）和baseline（项目基线对齐）。
5. flex-grow：定义项目的放大比例。默认值为0，表示不放大。如果存在剩余空间，具有正flex-grow值的项目将放大以填充剩余空间。
6. flex-shrink：定义项目的缩小比例。默认值为1，表示如果空间不足，该项目将缩小。
7. flex-basis：定义项目占据的主轴空间。如果主轴方向为水平方向，则相当于设置项目的宽度。默认值为auto，表示根据内容自动计算宽度。
8. align-self：定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。默认值为auto，表示继承父元素容器的align-items属性值。
   这些属性可以帮助你更好地控制弹性布局中的元素排列和空间分配。通过合理地使用这些属性，你可以创建出更加灵活和响应式的网页布局。记住，弹性布局是一种强大的工具，但也需要仔细考虑如何使用它来满足你的设计需求。