flex弹性布局
以下是弹性布局的一些知识点，很简单，易懂！
取值：
flex：当前元素充当弹性布局的容器，并且本身以块级元素显示。
inline-flex：当前元素充当弹性布局的容器，并且本身以行内元素显示。
概念：
- 容器：容纳弹性布局中子元素的父元素。
- 项目：容器中的子元素
注意：元素一旦变为弹性布局的元素后，float，clear，vertical-align，text-align都失效，定位属性是有效的！接下来就是弹性布局的核心：弹性布局的属性。弹性布局的属性分为容器的属性和项目的属性。
容器的属性：
flex-direction：定义容器的主轴方向
- row 默认，主轴水平，从左到右
- row-reverse主轴水平，从右到左
- column主轴垂直，从上到下
- column-reverse主轴垂直，从下到上
flex-wrap：如果项目在容器中一行显示不下的方式
- norwap：默认不换行，项目自压缩
- wrap：换行
- wrap-reverse：项目在交叉轴上的换行
- flex-flow：以上两个属性的简写，取值有两个
justify-content：项目在主轴方向上的对其方式
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- space-between：项目与项目之间的距离相等
- space-around：项目两侧的剩余空间相等
align-items：项目交叉轴的对齐方式
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- baseline：基线对齐
- stretch：如何项目未设置高度，将占满整个容器
align-content：如果有多跟轴线（需要换行），轴线的对齐方式
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- space-between：项目与项目之间的距离相等
- space-around：项目两侧的剩余空间相等
- stretch：占满整个轴线
项目的属性：
order：顺序，取值为整数，默认所有项目取值为0，取值越小越往前。
flex-grow：如果容器有剩余空间，定义项目的放大比例，将剩余空间分配给具有此属性的元素，按比例分配。
flex-shrink：如果容器有空间不足，定义项目的缩小比例。默认为1，取值为0，不压缩。
flex-basis：定义在主轴上的大小，可以覆盖width/height，默认为auto。
flex：以上3个属性的综合
align-self：设置当前这个项目的对齐方式，可以覆盖align-items
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- baseline：基线对齐
- stretch：如何项目未设置高度，将占满整个容器
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
