介绍
Flexbox 是一种用于 CSS 布局的新方法，能够实现弹性且响应式的布局。Flexbox 简化了响应式设计任务，让网页布局更加灵活而不失控制性。在本文中，我们将学习如何使用 Flexbox 来实现响应式网站布局，并增加页面的可读性和可访问性。
如何实现 Flexbox 布局？
实现 Flexbox 布局的方式取决于您的项目需求和工具链。您可以在项目中使用 Less，Sass 或其他 CSS 预处理器来生成 CSS。或者，您可以手动编写 CSS 样式。（本文将使用手动编写 CSS 样式的方式来实现）
Flexbox 布局的基本概念
Flexbox 具有三个主要的组成部分，分别是 Flex 容器（Flex container）、Flex 项目（Flex item）和轴线（Axis）。
CSS 属性 display: flex 将元素转换为一个 Flex 容器。容器中存在一个主轴（main axis）和一个交叉轴（cross axis），这一点与传统的盒模型布局有所不同。
Flex 容器
Flex 容器是包含了一组 Flex 项目的容器，它是一个块级元素，并且有一些特性：
如果一个元素被设置为 Flex 容器，那么它的子元素默认的 CSS 属性值将被覆盖。未设置的属性都将使用同样的默认值。
Flex 容器的主要任务是将它包含的 Flex 项目放在一个水平或垂直的线性排列中。
Flex 项目
Flex 项目是 Flex 容器中的每一个子元素，它有一些特性：
每个 Flex 项目占有它们背后的容器的宽度。
根据 Flex 容器设置的主轴方向，Flex 项目沿这个轴线排列。
Flex 项目将自己的尺寸和位置如何使用 Flexbox 风格的布局放在 Flex 容器中，这样可以轻松地实现自适应布局。
轴线（Axis）
轴线是 Flexbox 布局的两个轴之一。主轴沿着 Flex 容器的方向排列，交叉轴与主轴垂直，横跨整个 Flex 容器。
在响应式网站中使用 Flexbox 的示例代码
下面的代码展示了如何使用 Flexbox 在响应式网站中进行布局。
HTML 结构代码
-- -------------------- ---- -------
---- ------------------
---- ---------------------------
-----
----
-------------
--------------
----------------
-----
------
---- -----------------------------
---- -----------------------------
---- ---------------------------
------CSS 代码
-- -------------------- ---- ------- ---------- - ---------- ------ ------- - ----- -------- ----- ---------- ----- - -------- ---- --------- --------- ------- - -------- ----- - -------- --- --- --------- --------- ------- - ----- -- - ------- - ----------------- -------- - --- -- - -------- ----- ---------------- -------------- ------------ ------- ---------------- ----- - --- -- -- - ------- ----- - -------- - ----------------- ------ - -------- - ----------------- -------- - ------- - ----------------- -------- -
解释
在上面的代码中，我们定义了一个垂直的 Flex 容器，并将其内部元素水平排列。此外，我们还设置了与这些元素相应的 Flex 项目的属性：
父级
.container设置了display: flex和flex-wrap: wrap这两个属性，使它们成为了一个可以包含 Flex 项目的 Flex 容器，并且可以在 Flex 容器的宽度超出时换行显示。子级
.header,nav,content,sidebar,footer设置了padding: 10px，将它们内部的内容中心化，让分隔符更清晰。.header,nav ul,.content,.sidebar,.footer设置了flex: 1属性，让它们等比地自适应剩余的宽度，根据主轴的方向自动调整宽度。nav ul元素采用了 Flexbox 的子元素属性。它们的父级是nav元素，父级是一个 Flex 容器。我们设置了子元素成为 Flex 项目，以便于水平排列，此外还设置了一些常规的 Flexbox 属性，如justify-content：space-between表示让所有子元素在 Flex 容器内水平对齐，并对子元素之间的空白空间进行平均分配。
总结
通过 Flexbox 布局，我们可以更轻松地实现响应式设计，使网站的布局更加鲜明、有序，增加用户体验和页面可读性。我们可以通过多次实践，并通过深入学习 Flexbox 流式布局的原理和代码样式，来逐渐掌握 Web 前端技术的奥妙。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654918507d4982a6eb354cff