由于这是一个面试问题，因此您不会一一输入代码。如果遇到面试时要求你当场输入密码，面试官不会让你当场输入。传递下去。你什么都知道。
1. display: flex;
1. display: 给父容器添加flex属性可能会打破容器内原有的文档流模式，显示灵活的布局。
2. flex 是什么属性的缩写：
1. Flex 是flex-grow、flex-shrink 和flex-basis 的缩写。 2. 默认值为flex: 0 1 auto。最后两个属性是可选的。三、各属性基本介绍： 1、flex-grow: 属性用于设置或获取弹性框的增长率。 2. flex-shrink: flex-shrink属性指定flex元素的收缩规则。仅当Flex 元素的默认宽度之和大于容器时，Flex 元素才会收缩，并且收缩的大小基于： flex-shrink 3. flex-basis: flex-basis 属性用于设置或获取弹性框的弹性基础值。
3. 作为父容器的 5 大属性 (都有 initial 、 inherit 设置)*
1. flex-direction: 决定主轴的方向（即item放置的方向）。 1. row（默认值） : 主轴水平，起点为左边缘。 2. row-reverse: 主轴水平，起点为右边缘。 3.column: 主轴垂直，起点在顶部。 4. 柱反转主轴垂直，起点与柱同底，但顺序相反。 5.initial关键字用于将CSS属性设置为默认值。初始关键字可用于任何HTML 元素的任何CSS 属性。 6.inherit从父元素继承该属性。 *2. flex-wrap: 无法放置一轴时的环绕方法。 1. Nowrap默认为：行不换行。 如果容器不够宽，每个项目将被压缩以适应宽度。 2. 包裹新行：并将第一行放在容器顶部。 3.反向包裹：行，第一行位于容器底部。 3. justify-content: 定义项目在主轴上的对齐方式。 1、该性质与主轴方向密切相关。 2、主轴方向为：左边为行起点，右边为行反转起点，上方为列起点，下方为列反转起点。 1. flex-start（默认）值）: 个项目放置在主轴的起始位置。 2. flex-end: 项目位于主轴末端。 3. center: 居中* 4. space- Between: 对齐边缘，项目之间的间距均匀（第一个和最后一个项目与其父容器的边缘不间隔）。 5. space-around: 每个项目每一侧的空间相等。 因此，项目之间的距离是项目与边框之间距离的两倍（第一个和最后一个项目与其父容器边缘的距离恒定）。 4.align-items: 定义项目如何在交叉轴上对齐。 1.拉伸的默认值为：如果某个项目没有设置高度或设置为自动，则该项目将占据容器的整个高度。 *2. flex-start: 对齐交叉轴的起点。 3. flex-end: 对齐交叉轴的端点。 4. center: 对齐交叉轴的中点。 5.baseline: 项目中第一行文本的基线对齐（文本的行高和字体大小影响每行的基线）。 5.align-content:定义多个轴的对齐方式。 如果该项只有一个轴，则该属性不起作用（如果该项更改为多行，则可以使用align-content 而不是align-items）。 1.拉伸（默认值）:轴占据整个交叉轴。 2. flex-start: 与横轴的起点对齐。 3. flex-end: 与交叉轴的末端对齐。 4. center: 与交叉轴的中点对齐。 5. space- Between: 与相交轴的两端对齐，轴之间的间距均匀分布。 6. space-around: 每个轴两侧等距。 因此，轴之间的距离是轴与框架之间的距离的两倍。
4. 作用于子项目的 6 大属性
1. order: 定义项目的顺序。 值越小，排名越高。默认值为0。
2. flex-grow: 定义项目的增长率。默认值为0。也就是说，如果有剩余空间，则不会扩展。 3. flex-shrink: 定义item的收缩比例。默认值为1。也就是说，如果空间不足，物品就会缩小。 4. flex-basis: 定义item占用的主轴空间。 （如果主轴是横轴，设置该属性相当于设置item宽度，原来的宽度失效。） *5 flex:是flex-grow、flex-shrink、flex-basis的缩写。默认值为0，auto后为1。有两个属性是可选的。 6.align-self: 定义单个项目在交叉轴上的对齐方式。这允许您覆盖容器的align-items 属性。
5. flex中的缩写拓展：
1. Flexflow 是Flex Direction 和Flex Wrap 的缩写。 2. 默认为： flex-flow: 行换行*3. 各属性基本说明：* 1. Flex-direction: 调整主轴方向，包括行、行翻转、列、列翻转（默认为水平）。 1. row: 默认值。 将弹性项目水平显示为一行。 2. row-reverse: 与row 相同，但方向相反。 3.column:将灵活的项目垂直显示为一列。 4.column-reverse:与column相同，但方向相反。 2. flex-wrap: flex-wrap 属性指定是否包裹柔性项目。 nowrap、wrap、wrap-reverse* 1. nowrap: 默认值。 指定不包裹弹性项目。 2.wrap: 指定必要时将包裹弹性项目。 3.wrap-reverse: 指定如果需要的话，弹性项目以相反方向包裹。之前整理过一些知识点，这次我将相关内容整理一下，在核实后逐步分享给大家。本专题是《前端面试题》的相关专栏，大约有200+篇文章。
如果对大家有用，请关注并点赞。文章将继续完善。
如果您有想了解的前端知识，请在评论区留言，我们会及时分享相关内容。
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。