鲁斯前端布鲁斯前端

文章中英模式

布鲁斯前端面试题目 - Flexbox面试重点

深入理解CSS Flexbox布局模型，掌握flex容器与项目的关键属性，学习justify-content、align-items等对齐方式，以及flex-grow、flex-shrink等弹性分配空间的核心概念。

影片縮圖

懒得看文章？那就来看视频吧

Flex容器的关键属性

建立Flex布局的第一步是将一个元素设置为Flex容器，然后其子元素自动成为Flex项目：

.container {
  display: flex; /* 或 display: inline-flex */
}

Flex容器的主要属性：

flex-direction

定义主轴方向，决定Flex项目的排列方向。

  • 1. row（默认）：从左到右
  • 2. row-reverse：从右到左
  • 3. column：从上到下
  • 4. column-reverse：从下到上

flex-wrap

定义Flex项目在一行排不下时是否换行。

  • 1. nowrap（默认）：不换行
  • 2. wrap：换行，第一行在上方
  • 3. wrap-reverse：换行，第一行在下方

justify-content

定义Flex项目在主轴上的对齐方式。

  • 1. flex-start（默认）：左对齐
  • 2. flex-end：右对齐
  • 3. center：居中对齐
  • 4. space-between：两端对齐，项目之间间隔相等
  • 5. space-around：每个项目两侧的间隔相等
  • 6. space-evenly：项目间隔均匀分布

align-items

定义Flex项目在交叉轴上的对齐方式。

  • 1. stretch（默认）：如未设高度，将占满整个容器高度
  • 2. flex-start：交叉轴起点对齐
  • 3. flex-end：交叉轴终点对齐
  • 4. center：交叉轴居中对齐
  • 5. baseline：项目第一行文字的基线对齐

align-content

定义多行Flex项目在交叉轴上的对齐方式（仅当flex-wrap: wrap时有效）。

  • 1. stretch（默认）：占满整个交叉轴
  • 2. flex-start：交叉轴起点对齐
  • 3. flex-end：交叉轴终点对齐
  • 4. center：交叉轴居中对齐
  • 5. space-between：交叉轴两端对齐
  • 6. space-around：每个行两侧间隔相等

gap

定义Flex项目之间的间隙。

  • 1. gap: 10px; (设置行与列间隙相同)
  • 2. row-gap: 10px; (设置行间隙)
  • 3. column-gap: 20px; (设置列间隙)

视觉示例：

justify-content: space-between

Item 1
Item 2
Item 3

align-items: center

Short
Tall
Medium

flex-direction: column

Top
Middle
Bottom

Flex项目的关键属性

除了容器属性外，Flex项目也有自己的一组属性，用于控制单个项目如何伸缩和对齐：

flex-grow

定义项目在空间剩余时的放大比例。

默认值：0（不放大）

数值越大，占据剩余空间比例越大

flex-shrink

定义项目在空间不足时的缩小比例。

默认值：1（空间不足时等比缩小）

数值越大，缩小比例越大；0表示不缩小

flex-basis

定义项目在伸缩前的初始大小。

默认值：auto（项目本身的大小）

可设为具体尺寸（px, %, rem等）

flex

flex-grow, flex-shrink 和 flex-basis的简写。

默认值：0 1 auto

flex: 1; 等同于 flex: 1 1 0%;

flex: auto; 等同于 flex: 1 1 auto;

flex: none; 等同于 flex: 0 0 auto;

align-self

允许单个项目有与其他项目不同的对齐方式，覆盖align-items属性。

可能的值：auto（默认）, flex-start, flex-end, center, baseline, stretch

.item {
  flex: 1; /* 均分剩余空间 */
}

.important-item {
  flex: 2; /* 占据2倍的剩余空间 */
}

.fixed-item {
  flex: 0 0 200px; /* 固定宽度200px，不伸缩 */
}

.special-item {
  align-self: flex-end; /* 单独对齐到底部 */
}

🔥 常见面试题目

(一) flex: 1 代表什么？以及flex-grow、flex-shrink和flex-basis的作用？

答：flex是flex-grow、flex-shrink和flex-basis的简写属性。

  • flex: 1 等同于 flex: 1 1 0%，包含三个属性：
    • flex-grow: 1 - 定义项目的放大比例，表示会分配容器的剩余空间
    • flex-shrink: 1 - 定义项目的缩小比例，表示空间不足时会缩小
    • flex-basis: 0% - 定义项目的基准大小，0%表示完全依赖flex-grow分配

这三个属性的作用：

  • flex-grow：决定项目如何分配剩余空间，值越大分得越多
    例：两个项目，一个flex-grow:1，另一个flex-grow:2，则后者获得的剩余空间是前者的两倍
  • flex-shrink：决定项目如何缩小，值越大缩小得越多
    例：容器宽度不足时，flex-shrink:2的项目比flex-shrink:1的项目缩小得更多
  • flex-basis：设置项目的初始大小
    例：flex-basis:100px表示项目初始宽度为100px，再根据flex-grow和flex-shrink调整

简单说，flex: 1使项目能够弹性地填充容器空间，均等分配所有可用空间。

(二) 如何使用Flexbox实现垂直和水平居中？

答：使用Flexbox实现元素的完美居中是非常简单的：

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 或者仅水平居中 */
.horizontal-center {
  display: flex;
  justify-content: center;
}

/* 或者仅垂直居中 */
.vertical-center {
  display: flex;
  align-items: center;
}

这种方法适用于各种情况，包括单行文本、多行文本、图片或复杂元素的居中。与传统的方法相比（如绝对定位+负margin、表格布局等），Flexbox居中更直观且灵活。