随着移动设备的普及，网站布局的自适应性变得越来越重要。而 CSS Flexbox 布局则成为了一个强大的工具，能够在不同屏幕大小和设备上实现完整的、自适应的网站布局。
什么是 CSS Flexbox 布局
CSS Flexbox 布局是一种用于在一个容器中排列和对齐子元素的新型 CSS 布局模型。
**Flexbox：**是 Flexible Box 的缩写，意为 “弹性布局模型”。
CSS Flexbox 布局的特点
CSS Flexbox 布局有以下几个突出的特点：
- 父容器决定布局
- 子元素沿主轴方向排列，可以横向或纵向排列。
- 纵向方向的布局可以被父元素（容器）指定。
- 子元素可以在容器水平或垂直居中。
- 父元素因为是容器，所以其对子元素施加的样式作用于所有子元素。
CSS Flexbox 布局实现网站布局的步骤
接下来将介绍如何使用 CSS Flexbox 布局实现一个完整的、自适应的网站布局。
步骤 1：HTML 结构设计
在这个网站布局中，我们将使用 HTML5 语义化元素来划分布局内容。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------------------------
----- ---------------- -----------------
-------
------
--------
-----
----
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
---------
-------- ------------------
-------- ------------------------- -----------------
------ -------------------------------
----------
--------
---- ---- ------- -----------
---------
-------
-------在代码中我们使用了 <header> 元素作为顶部导航栏， <nav> 元素作为导航菜单项的容器， <ul> 元素作为菜单项列表，<li> 元素作为菜单项，<section> 元素作为网站布局的容器，<article> 元素作为主文章内容， <aside> 元素作为侧边栏内容， <footer> 元素作为网站页面的底部。
步骤 2：CSS 样式设计
2.1：重置样式
我们需要使用一些通用样式和重置样式，以确保网站的布局和样式是相同的。以下是一些基本格式。
-- -------------------- ---- ------- - - ------- -- -------- -- ----------- ----------- - ----- ---- - ------- ----- - ---- - ------------ ------ ----------- ---------- ----- ------------ ---- ------ ----- - - - ------ -------- ---------------- ----- - -- - ----------- ----- - --- - ---------- ----- - ---------- - ---------- ------ ------- - ----- -------- - ----- -
我们使用 box-sizing: border-box 属性， 以确保元素宽度不被包括在 padding 和 border 内。
2.2：布局样式
接下来我们需要定义容器的布局。
-- -------------------- ---- ------- ------ - -------- ----- ------------ ------- ---------------- -------------- ------- ----- - --- -- - -------- ----- - --- -- -- - ------------ ----- - --- -- -------------- - ------------ -- - ---------- - -------- ----- ---------- ----- - ------------- - ---------- -- ------------- ----- - -------- - ----------- ------ -
我们使用了 display: flex 属性将容器转换为 Flexbox 面板，并使用 align-items: center 和 justify-content: space-between 属性使导航栏垂直居中， 并在导航栏中主轴的两端对齐。
对于这个网站布局，我们使用 flex-wrap: wrap 属性使 Flexbox 容器跨越多行并“换行”，以防止内容溢出。
我们还希望主内容和侧边栏始终保持相同的高度，因此我们将侧边栏的 flex-basis 属性设置为一个固定值，即 240px，这将使其始终具有相同的宽度。
步骤 3：响应式 CSS
我们已经完成了一些基本样式和布局，但在小屏幕设备上布局可能会出现问题。因此，我们需要添加响应式 CSS。
-- -------------------- ---- ------- ------ ------ --- ----------- ------ - ---------- - --------------- ------- - ------------- - ------------- -- -------------- ----- - -------- - ----------- ----- - -
我们在此使用媒体查询，将屏幕宽度小于 550px 的浏览器视窗样式作为响应式样式，然后修改一些样式以适应小屏幕设备。我们将 Flexbox 容器的方向从 “行”（默认方向）修改为 “列”，以便网站在较小的设备上垂直布局。
我们还将针对小屏幕设备对主文章和侧边栏样式进行修改，以使主内容和侧边栏居中和元素间距在垂直方向上保持一致。
-- -------------------- ---- ------- ------ ------ --- ----------- ------ - ---------- - --------------- ------- - ------------- - ------------- -- -------------- ----- - -------- - ----------- ----- - -
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------------------------
----- ---------------- -----------------
-------
------
--------
-----
----
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
---------
-------- ------------------
-------- ------------------------- -----------------
------ -------------------------------
----------
--------
---- ---- ------- -----------
---------
-------
--------- -------------------- ---- ------- - - ------- -- -------- -- ----------- ----------- - ----- ---- - ------- ----- - ---- - ------------ ------ ----------- ---------- ----- ------------ ---- ------ ----- - - - ------ -------- ---------------- ----- - -- - ----------- ----- - --- - ---------- ----- - ---------- - ---------- ------ ------- - ----- -------- - ----- -------- ----- ---------- ----- - ------ - -------- ----- ------------ ------- ---------------- -------------- ------- ----- - --- -- - -------- ----- - --- -- -- - ------------ ----- - --- -- -------------- - ------------ -- - ------------- - ---------- -- ------------- ----- - -------- - ----------- ------ - ------ ------ --- ----------- ------ - ---------- - --------------- ------- - ------------- - ------------- -- -------------- ----- - -------- - ----------- ----- - -
结论
CSS Flexbox 布局在实现响应式和自适应设计方面非常有用。通过使用 Flexbox 布局，我们可以轻松创建一个自适应、易于管理并且流畅的网站布局。
通过 HTML 结构和 CSS 样式的设计，我们可以漂亮地呈现出一个完整的网站布局，并在不同的屏幕大小和设备上实现马上自适应性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f2581eedcc8a97c8ce260