在当今的移动设备时代，响应式设计变得越来越受欢迎。为了让用户在各种不同设备上享有更好的体验，设计师们经常使用响应式导航条，使其在不同大小的屏幕上显示出最佳效果。CSS Flexbox 是一个非常有用的工具，可以帮助开发人员实现这一目标。如果您对 CSS Flexbox 不熟悉，不必担心，本文将为您介绍基本知识并提供示例代码。
Flexbox 基础知识
在开始我们的代码实践之前，我们需要先了解 Flexbox 的一些基本概念。
- flex container：包围着 flex items 的父元素。
- flex item：使用了 Flexbox 布局的元素。
- main axis：flex container 的主轴，是它最主要的轴线，用于定位及对齐 flex items。
- cross axis：与主轴垂直的轴线，用于对齐及调整 flex items。
1. 父元素如何成为 flex container？
要使任何 HTML 元素成为 flex container，只需将其的 display 属性设置为 flex 或 inline-flex。例如：
nav {
display: flex;
}这个样例将 <nav> 元素转变为 flex container。
2. 如何在 flex container 数轴上定位 flex items？
在 Flexbox 布局中，我们使用 justify-content 属性来定位 flex items。默认情况下，justify-content 的值为 flex-start，表示 flex items 在主轴上从 container 的起始位置开始排列。其他选项包括：
- flex-end：flex items 在主轴上从 container 的终止位置开始排列。
- center：使 flex items 平分 container 的主轴空间，并在空间的两侧分别排列。
- space-between：flex items 平均分布在 container 的主轴空间中，直至它们填满 container。
- space-around：flex container 在 flex items 之间及两侧留下了空间。
这里是一个代码示例：
nav {
display: flex;
justify-content: space-between; /* nav内容平分nav宽度，左右各留一半空间 */
align-items: center; /* 垂直居中 */
}3. 如何在交叉轴上定位 flex items？
通过 align-items 属性，我们可以确定 flex items 在 container 的 cross axis 上的位置。这里有一些可用的值：
- stretch：是默认值。flex items 将根据 container 的高度自动拉长，以与 container 相匹配。
- flex-start：将 flex items 对齐到 cross axis 的 container 起始位置。
- flex-end：将 flex items 对齐到 cross axis 的 container 终止位置。
- center：使 flex items 在 cross axis 上垂直居中。
- baseline：使 flex items 在它们的基线上对齐。
这里是一个示例代码：
nav {
display: flex;
justify-content: space-between; /* nav内容平分nav宽度，左右各留一半空间 */
align-items: center; /* 垂直居中 */
}4. flex-wrap 属性是什么？
默认情况下，容器中的 flex items 会尽可能占据整个容器。但是，在许多情况下，我们希望 flex items 在容器中换行，以便适应更小的屏幕。为了实现这一目标，我们可以使用 flex-wrap 属性：
nav {
display: flex;
flex-wrap: wrap; /* flex items 分行排布 */
}可以根据需要使用此属性并设置为 wrap 或 nowrap。
实战 - 响应式导航条
现在我们已经了解了 Flexbox 的基本知识，让我们开始构建一个响应式导航条吧！在这里，我们将使用一个简单的 HTML 列表，其中包含导航链接。以下是 HTML 代码：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>在 CSS 中，我们将应用以下样式：
-- -------------------- ---- ------- --- - -------- ----- -- - --- -- ---- --------- -- ---------------- -------------- -- - --- ---- --- ----------- -- ------------ ------- -- - --- ---- -- ----------------- ----- -- -------- -- ------ ----- -- ------- -- ---------- ------- -- --- ---- -- - -- - -------- ----- -- - ---- -- ---- --------- -- ---------------- ----- -- ----------- -- ------- -- -- ----- ------ -- -------- -- -- ----- ------- -- - -- - ------- - ----- -- ---- ---- --- -- - - - ------ ----- -- ------- -- ---------------- ----- -- ----- -- -
现在，这个导航栏看起来很不错。但是，由于缩放问题，我们需要添加一些响应式特性，使导航栏适应不同的屏幕大小。
为此，我们需要在 CSS 中添加一下特殊的媒体查询：
-- -------------------- ---- -------
------ ----------- ------ - -- ------------- --
-- -
-------- ----- -- ------- -- --
--------------- ------- -- -- ---- ---------- --
--------- --------- -- -------------- --
------ ----- -- ---------- --
---- ----- -- -------- ---- --- --
----- -- -- ------- --
----------------- ----- -- -------- --
-
-- -
----------- ------- -- - ---- ------ --
------- -- -- -- ---- - ------ --
-------- ----- -- -- - ---- ----- ------- --
-------------- --- ----- ----- -- -------------- -- --
-
--------------- -
-------------- ----- -- ------ -- ---- --
-
--- --------- -
-------- ----- -- - ---- -- ------ -------- ---- -- --
---------------- ------- -- - ---- ----- ---- --
-
------- -
-------- ------ -- - ------- ---- --
------ -- -- ------------------------ --
------------- ----- -- - ------ --- ---- -- --
-
-以上就是我们完整的代码。完整示例可见于以下代码片段：
-- -------------------- ---- -------
-----
-- -------- --------------------------
----
------ --------------------
------ --------------------
------ ----------------------
------ --------------------
-----
-------- -------------------- ---- -------
--- -
-------- ----- -- - --- -- ---- --------- --
---------------- -------------- -- - --- ---- --- ----------- --
------------ ------- -- - --- ---- --
----------------- ----- -- -------- --
------ ----- -- ------- --
---------- ------- -- --- ---- --
--------- --------- -- ---------- --
-
-- -
-------- ----- -- - ---- -- ---- --------- --
---------------- ----- -- ----------- --
------- -- -- ----- ------ --
-------- -- -- ----- ------- --
-
-- -
------- - ----- -- ---- ---- --- --
-
- -
------ ----- -- ------- --
---------------- ----- -- ----- --
-
------ ----------- ------ - -- ------------- --
-- -
-------- ----- -- ------- -- --
--------------- ------- -- -- ---- ---------- --
--------- --------- -- -------------- --
------ ----- -- ---------- --
---- ----- -- -------- ---- --- --
----- -- -- ------- --
----------------- ----- -- -------- --
-
-- -
----------- ------- -- - ---- ------ --
------- -- -- -- ---- - ------ --
-------- ----- -- -- - ---- ----- ------- --
-------------- --- ----- ----- -- -------------- -- --
-
--------------- -
-------------- ----- -- ------ -- ---- --
-
--- --------- -
-------- ----- -- - ---- -- ------ -------- ---- -- --
---------------- ------- -- - ---- ----- ---- --
-
------- -
-------- ------ -- - ------- ---- --
------ -- -- ------------------------ --
------------- ----- -- - ------ --- ---- -- --
-
-结论
现在，我们已经实现了一个响应式导航栏，并了解了如何使用 Flexbox 模型在 Web 设计中实现响应式。现在，您可以钻研 Flexbox 更深入，并开始构建自己的响应式布局。Flexbox 的学习曲线可能较陡峭，但它非常有用，并且可以帮助您设计出更加现代优雅的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672344c52e7021665e0f2869