弹性盒子（Flex）高频面试题及详细答案（实战向）.docxVIP

弹性盒子（Flex）高频面试题及详细答案（实战向）

一、基础概念类（入门必问）

1.说说你对Flex布局的理解？为什么要用Flex？

参考答案：

Flex是CSS3推出的一维弹性布局模型，专门用来解决传统流式布局、浮动布局的痛点。布局结构分为两层：父容器（flex容器）和子元素（flex项目）。一旦给父元素设置display:flex，子元素就会自动变成弹性项目，脱离普通文档流，不再受浮动、默认块级行级规则限制。

相比传统布局的优势：

不用浮动，无需清除浮动，不会出现高度塌陷问题

垂直居中、水平居中实现简单，代码极简

自动适配剩余空间，自适应布局更方便，适配移动端友好

可以自由控制元素排列方向、顺序、缩放比例，灵活性极高

2.Flex布局的核心轴线概念是什么？

参考答案：

Flex布局有两条核心轴线，所有对齐、排列规则都围绕这两条线实现：

主轴（mainaxis）：子元素默认排列的方向，默认是水平向右。由flex-direction决定，可横向、可纵向。

侧轴/交叉轴（crossaxis）：和主轴垂直的方向，主轴横向时，侧轴为纵向；主轴纵向时，侧轴为横向。

简单记：方向看主轴，对齐看侧轴。

3.设置display:flex后，子元素会发生哪些默认变化？

参考答案：

子元素默认横向排列（flex-direction:row），不会自动换