Flex 面试题及详细答案（实战向）.docxVIP

Flex面试题及详细答案（实战向）

一、基础概念篇

1.什么是Flex布局？为什么推荐使用Flex替代传统浮动布局？

答案：

Flex是CSS3推出的弹性伸缩布局模型，是一种一维布局方案，专门用于解决元素排列、对齐、等分、自适应布局问题。布局结构分为容器（flex-container）和项目（flex-item），给父元素设置display:flex即可开启弹性布局。

相比传统浮动布局，Flex的核心优势：

无需清除浮动，不会出现高度塌陷问题，布局更稳定；

天然支持水平、垂直居中，代码极简，不用定位、负边距hack；

自适应能力强，可自动分配剩余空间，适配不同屏幕尺寸；

排列方向灵活，支持横向、纵向、反向排列，浮动只能横向排列；

子元素尺寸、对齐方式可独立控制，布局精细化程度更高。

2.开启Flex布局后，子元素会有哪些默认特性？

答案：

父元素设置display:flex后，直接子元素自动成为flex项目，具备以下默认特性：

默认横向排列（主轴为水平方向），不会自动换行，空间不足时会挤压子元素；

子元素默认高度自适应父容器高度（侧轴拉伸对齐）；

行内元素、块级元素统一格式化，无需设置宽高也可正常排列；

子元素的float、clear属性失效，不影响flex排列；

子元素默认不会收缩为0，具备基础的自适应收缩能力。

3.详细