在前端开发过程中，选项卡组件是比较常用的一种交互方式。而实现选项卡切换所需的布局，一般使用 Flexbox 布局。本文将介绍如何使用 Flexbox 布局实现选项卡切换，从基础快速入门到实战代码演练，帮助读者更好地掌握这一技术。
Flexbox 简介
Flexbox 是 CSS3 引入的一种新的布局模式，它的全称叫做 Flexible Box，意为“弹性盒子”。Flexbox 布局的特点是，它可以在不固定容器尺寸和不固定项尺寸的情况下，自动调整元素的位置和大小，从而实现各种复杂的布局效果。
Flexbox 布局有以下几个主要概念：
- 容器 (Container)：拥有 Flexbox 布局的元素，称为容器。容器中的每个子元素都成为该容器的“项” (Item)。
- 主轴 (Main Axis)：是容器的主要方向。在 Flexbox 布局中，水平方向 (从左到右) 为主轴，垂直方向 (从上到下) 为交叉轴 (Cross Axis)。
- 项的排列方向 (Flex Direction)：决定了项在主轴上的排列方向。默认值为 row，表示从左到右排列。还有 column (从上到下)、row-reverse (从右到左) 和 column-reverse (从下到上) 四种方向。
- 主轴对齐方式 (Justify Content)：定义了项沿主轴的排列方式。可能的取值有：flex-start (起点对齐)、flex-end (终点对齐)、center (居中对齐)、space-between (两端对齐)、space-around (均匀分配)。
- 交叉轴对齐方式 (Align Items)：定义了项沿交叉轴的对齐方式。可能的取值有：flex-start (起点对齐)、flex-end (终点对齐)、center (居中对齐)、baseline (基线对齐)、stretch (拉伸对齐)。
- 项的排列顺序 (Order)：定义了项的排列顺序。默认值为 0，数值越小，排列顺序越靠前。
- 项的缩放比例 (Flex)：定义了项在剩余空间中的缩放比例。默认值为 0，表示不占用剩余空间。
- 项的对齐方式 (Align Self)：定义了各项在交叉轴上的自身对齐方式。可能的取值有：auto (默认，继承父容器)，flex-start (起点对齐)、flex-end (终点对齐)、center (居中对齐)、baseline (基线对齐)、stretch (拉伸对齐)。
选项卡切换示例
有了上面的基础知识，我们可以尝试使用 Flexbox 布局来实现选项卡切换。选项卡切换是指，用户在多个选项卡中点击某一个选项，可以切换到相应的内容。我们以 HTML、CSS、JavaScript 为基础，在实现选项卡切换时，首先构建 HTML 结构：
-- -------------------- ---- ------- ---- ------------- ---- --------------- ------- ---- --------------- ------- ---- --------------- ------- ------ ---- --------------- ---- ---------------- ------- ---- ---------------- ------- ---- ---------------- ------- ------
选项卡和对应的内容放在两个容器中，各自包含三个子元素。由于实现选项卡切换的过程中，需要对选项卡设置激活样式，因此我们可以使用 CSS 代码对选项卡进行样式设置：
-- -------------------- ---- ------- ----- - -------- ----- ---------------- -------------- ------------ ------- - ---- - ----- -- ----------- ------- -------- ----- ------- -------- -------------- --- --- - -- ----------------- -------- ------- --- ----- ----- - ----------- - ----------------- -------- ------ ----- - ------- - ----------- ----- ------- --- ----- ----- -------------- - - --- ---- - ------ - -------- ----- -------- ----- - ------------- - -------- ------ -
在 Tab 样式中，我们使用 Flexbox 布局使 Tab 均匀分配空间，同时在选中的 Tab 上添加 active 样式，以突出其激活状态。在 Panel 样式中，我们使用 display 属性将其隐藏，然后再通过 JS 代码在需要时动态显示。下面是 JavaScript 代码的实现：
-- -------------------- ---- -------
--- ---- - ----------------------------------
--- ------ - ------------------------------------
--------------------- ----- -
----------------------------- -------- -- -
--- --------- - --------------------------------------
--- ----------- - ----------------------------------------
-------------------------------------
---------------------------------------
-----------------------------
-----------------------------------------------
---
---
-------- -------------- -
--- ----- - --
----- ----- - ---------------------------- --------
------ ------
-JavaScript 代码中，我们使用 forEach 方法循环绑定所有 Tab 的 click 事件，然后利用该 Tab 的 getIndex 函数，通过点击时的 target 获取当前 Tab，使用 active 样式切换到选中状态。同时，找到其对应的 Panel，也添加 active 样式，其他 Panel 则移除 active 样式。
总结
本文利用 Flexbox 布局实现了选项卡切换功能，同时介绍了其主要的概念和使用方法。Flexbox 布局在实现各种复杂布局时非常强大，熟练掌握它的大致功能和操作方法对装修网站非常有用。同时，在选择工具时，也可考虑采用 Flexbox 工具，以便更加高效、灵活地实现网页布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cc781968c7c53b0f40c65