以下是弹性布局的一些知识点，很简单，易懂！

取值：

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：如何项目未设置高度，将占满整个容器

链接: https://fly63.com/article/detial/4285