flex面试题及答案.docx

flex面试题及答案

一、基础知识与核心概念（总分30分）

1.什么是Flexbox（弹性盒子）布局？它主要解决什么布局问题？（10分）

答案：Flexbox（FlexibleBox）是一种用于在页面上布置元素的CSS布局模式。它旨在提供一种更有效的方式来布置、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。它主要解决一维布局问题（无论是行还是列），使得元素能够轻松地适应容器大小，并实现复杂的对齐和分布效果。

2.在Flexbox中，什么是“主轴”和“交叉轴”？它们的方向由什么属性决定？（10分）

答案：主轴是Flex容器中项目默认排列的方向，交叉轴则是与主轴垂直的方向。

主轴的方向由`flex-direction`属性决定，它有四个值：`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）、`column-reverse`（从下到上）。交叉轴的方向始终与主轴垂直，例如当主轴为水平方向时，交叉轴就是垂直方向。

3.`display:flex`和`display:inline-flex`有什么区别？（10分）

答案：两者的主要区别在于容器本身的渲染方式：

`display:flex`：创建一个块级Flex容器，元素会占据整行宽度，且容器本身是块级元素。

`display: