Flex 高频面试题及详细答案（实战版）.docxVIP

Flex高频面试题及详细答案（实战版）

前言：本套题库精选前端求职、技术面试中高频出现的Flex布局相关考题，覆盖基础概念、核心属性、布局难点、兼容问题、实战场景等核心考点，答案贴合工程实战，通俗易懂，适配初级、中级前端面试场景。

一、基础概念面试题

1.什么是Flex布局？相较于传统流式布局有什么优势？

参考答案：Flex是弹性盒子布局，是CSS3推出的一维布局模型，专门用于解决页面元素的排列、对齐、分配空间等布局问题。布局核心分为容器（父元素）和项目（子元素），通过简单属性即可实现灵活布局。

相较于传统布局，优势主要有三点：一是传统布局依赖浮动、定位，代码繁琐，容易出现高度塌陷、对齐错乱等问题，Flex无需清除浮动，布局更稳定；二是可以轻松实现水平居中、垂直居中、等分空间、自适应伸缩等复杂布局，大幅简化代码；三是天然适配移动端自适应场景，响应式布局实现更简单，兼容性覆盖所有主流现代浏览器。

2.简述Flex布局的主轴和侧轴概念

参考答案：Flex布局的所有排列规则都围绕主轴和侧轴展开，默认状态下，主轴为水平方向，侧轴为垂直方向。

主轴是子元素排列的核心轴线，方向可通过flex-direction切换，支持水平正向、水平反向、垂直正向、垂直反向四种模式；侧轴始终与主轴垂直，用于控制子元素的垂直对齐、横向拉伸等样式。

需要注意的是，主轴方向改变后，