高频面试你知道display: flex；嘛？说说。。。。。

简介：

在前端开发中，display: flex; 是一种非常强大的布局模式，它允许你创建灵活的响应式布局。Flexbox（Flexible Box）布局模块旨在提供更好的方式来设计网页布局以及更小的UI组件。它主要是为了一维布局模式而设计的，即行（row）或列（column），不过也可以通过嵌套来实现复杂的二维布局。

Flex 容器

当一个元素的 display 属性设置为 flex 或 inline-flex 时，该元素就变成了一个 flex 容器，并且其直接子元素会变成 flex 项目。

Flex 项目属性

• order：定义项目的排列顺序。数值越小，排序越靠前，默认值为 0。
• flex-grow：定义项目的放大比例，默认是 0，即如果存在剩余空间，也不放大。
• flex-shrink：定义了项目的缩小比例，默认是 1，即如果空间不足，它将缩小。
• flex-basis：定义了在分配多余空间之前，项目的初始长度（主轴上的长度）。可以是具体的长度或关键字。
• flex：是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 的类。

Flex 容器属性

• flex-direction：确定主轴的方向（即项目的排列方向）。可以是 row、row-reverse、column 或 column-reverse。
• justify-content：定义了项目在主轴上的对齐方式，这取决于 flex-direction 的值。
• align-items：定义项目在交叉轴上如何对齐。
• align-content：多根轴线的对齐情况，如果项目只有一根轴线，则不起作用。
• flex-wrap：默认情况下，项目都排在一条线上；不过，如果项目的体积超过容器宽度，项目将会换行，此时 flex-wrap 可以控制是否换行以及换行的方向。