随着越来越多的用户使用不同尺寸的设备访问网站，我们需要实现能够在各种屏幕大小上良好展现的导航菜单。Flexbox 布局提供了一种可以很方便地实现自适应导航菜单的方法。在这篇文章中，我们将探讨如何使用 CSS Flexbox 实现自适应的导航菜单。
Flexbox 布局
CSS Flexbox 是一种弹性盒子布局模型，允许我们沿一个方向（水平或垂直）对其子元素进行布局。Flexbox 通过 flex 容器和 flex 项目两个主要属性来实现这一布局模型。
容器属性
在 flex 布局中，容器是我们想要应用布局效果的父元素。以下是一些常用的 flex 容器属性：
display: 设置容器为 flex 盒子。flex-direction: 设置 flex 盒子的方向，可以是row、column、row-reverse或者column-reverse。justify-content: 设置 flex 项目在主轴上的对齐方式，可以是flex-start、center、flex-end、space-between或者space-around。align-items: 设置 flex 项目在交叉轴上的对齐方式，可以是flex-start、center、flex-end、stretch或者baseline。align-content: 主要用于多行的 flex 容器，设置多行项目在交叉轴上的对齐方式，可以是flex-start、center、flex-end、stretch或者space-between。
项目属性
在 flex 容器中的每个子元素被称为 flex 项目。我们可以使用以下属性来控制项目在 flex 容器中的布局：
flex-grow: 指定项目在可分配空间中所占比例，默认为 0，即不放大。flex-shrink: 指定项目在空间不足时所占比例，默认为 1，即缩小。flex-basis: 指定项目在分配多余空间之前留出的空间，默认为 0。flex: 设置flex-grow、flex-shrink和flex-basis的值，也可以缩写为flex: <flex-grow> <flex-shrink> <flex-basis>。align-self: 设置单个项目在交叉轴上的对齐方式。
导航菜单实现
现在，我们已经了解了 Flexbox 布局基本概念，接下来将使用这些概念来创建自适应的导航菜单。在我们的例子中，我们将创建一个水平导航菜单，其中包含四个选项卡。
---- ------------ -- -------- ------------------------- -- -------- --------------- ----------------- -- -------- ----------------------------- -- -------- ---------------------------- ------
首先，我们需要将 nav 元素设置为 flex 容器，并将它的 flex-direction 属性设置为 row，这样所有的选项卡都将水平排列。我们还需要将 align-items 属性设置为 center，这样所有的选项卡将被垂直居中。
---- - -------- ----- --------------- ---- ------------ ------- -
接下来，我们需要将每个选项卡设置为 flex 项目。我们将使用 justify-content 来确定它们在主轴上的对齐方式，此处我们将使用 space-between，它会让选项卡在主轴上平分空间。我们还需要将选项卡的宽度设置为 100%，这样它们才能完全填充父容器。
--------- - -------- ----- ---------------- -------------- ------ ----- -
我们还想突出显示当前选项卡。为此，我们将使用 active 类来标识当前选项卡，并将它的 background-color 属性设置为我们选择的颜色。
---------------- - ----------------- -------- -
最后，我们还可以添加一些动画效果来让选项卡更加生动。我们可以使用 transition 属性为选项卡的 background-color 属性添加渐变效果，并在鼠标悬停在选项卡上时改变它的背景颜色。
--------- - -- --- -- ----------- ---------------- ---- -------- - --------------- - ----------------- -------- -
总结
使用 CSS Flexbox 布局，我们可以很容易地创建自适应的导航菜单。以上述实现为例，我们可以发现，通过简单地使用 Flexbox 属性，就能够很快布局出需要的样式。除了导航菜单，使用 Flexbox 布局能够让我们更容易地创建多个其他 Web 组件，如商品列表、卡片等等。
完整示例代码如下：
---- ------------ -- -------- ------------------------- -- -------- --------------- ----------------- -- -------- ----------------------------- -- -------- ---------------------------- ------
---- - -------- ----- --------------- ---- ------------ ------- - --------- - -------- ----- ---------------- -------------- ------ ----- -------- ------ ----- ---------------- ----- ------ -------- ----------- ---------------- ---- -------- - ---------------- - ----------------- -------- ------ ----- - --------------- - ----------------- -------- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6490945a48841e9894eb6803