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

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

本套面试题覆盖前端面试高频Flexbox考点，从基础概念、核心属性、布局实操到常见坑点，所有答案贴合实际开发场景，摒弃书面化虚话，适配初级、中级前端面试场景。

一、基础概念题（入门高频）

1.什么是Flexbox？它的核心作用是什么？

答案：

Flexbox是CSS3推出的弹性布局模块，是一种一维布局模型，专门用来解决页面中元素的水平、垂直居中、自适应排列、等分布局、不等宽自适应等传统浮动布局的痛点。

传统浮动布局存在脱离文档流、清除浮动麻烦、垂直居中困难、自适应兼容性差等问题，而Flexbox可以简单、高效地实现各类常规布局，且完全适配移动端和PC端。

Flexbox布局分为两个核心角色：父容器（弹性容器）、子元素（弹性项目），所有布局规则都围绕这两者的属性展开。

2.简述Flexbox的主轴和侧轴（交叉轴）

答案：

Flexbox所有的排列、对齐、缩放规则，都基于主轴和侧轴，且轴的方向不是固定的，由flex-direction决定。

主轴：弹性项目排列的默认方向轴线，默认水平方向

侧轴（交叉轴）：和主轴垂直的轴线，默认垂直方向

轴方向对应规则：

flex-direction:row（默认）：主轴水平、侧轴垂直

flex-direction:column：主轴垂直、侧轴水平

简单总结：项目顺着哪个轴