前端界中，CSS 布局一直是一个让人头痛的问题。特别是在移动设备上，我们需要处理的屏幕尺寸、设备型号、设备朝向等变量都有可能导致屏幕布局的破碎。Flexbox 是一个用于 HTML 的 CSS 排列模型，用于更有效地布置、对齐和分布一个容器中的项目，即使它们的尺寸是未知或动态的。在这篇文章中，我们将通过使用 Flexbox 完成官网中的哥布林布局效果。
Flexbox 布局的概念
在深入研究哥布林布局之前，我们需要了解一些 Flexbox 布局的概念。以下是一些基本的概念：
- Flex Container（容器）：将 display 属性设置为 flex 或 inline-flex 的元素。
- Flex Item（项目）：Flex 容器中的子项。
- Main Axis（主轴）：Flex 计算的主轴。可以是从左到右（默认）或从上到下。
- Cross Axis（交叉轴）：垂直于主轴的轴线。
哥布林布局的例子
在 Fantasy 系列电影的官方网站中，哥布林的页面匠人采用了一个很有趣的布局方式。网站中的元素被分为几个部分，这些部分都有不同的尺寸和摆放方式。我们来看一下以下的页面示例：
我们比较容易就能看出，上面的布局有以下特点：
- 页面元素被分为三个部分：头部、主体内容和侧边栏。
- 头部中有一个横向导航条。
- 主体内容中有一个沉浸式大图和一篇文章。
- 侧边栏中有一些按钮。
那么，如何使用 Flexbox 布置这种网页呢？
使用 Flexbox 实现哥布林布局
Flexbox 布局使用简单而直观，非常适合进行网页排版，这里我们就来演示一下如何使用 Flexbox 布局实现上述页面。
首先，我们需要将 HTML 结构划分为容器和项目。以下是 HTML 标记：
-- -------------------- ---- -------
---- ------------------
------- ---------------
---- --- ---
---------
---- -------------
-------- ------------------------
---- ----- ---
----------
-------- ----------------
---- -- ---
----------
------
------ ----------------
---- --- ---
--------
------我们使用一个 div 元素作为包含所有内容的容器，使用 header、div 和 aside 元素作为容器的直接子元素。其中，header 元素包含横向导航栏，div 元素包含页面内容，aside 元素包含侧边栏内容。接下来，我们可以添加一些 CSS 属性来实现 Flexbox 布局。
1. 将 container 元素设置为 Flex Container
我们需要在 .container 元素中添加以下样式，将该元素设置为 Flex Container：
.container {
display: flex;
}这将使所有子项成为 Flex Item，并在默认情况下使它们沿主轴对齐。我们还可以添加其他样式来更改 Flex Container 的行为。例如，可以使用 flex-direction 更改主轴方向等。更多关于 Flex Container 的样式，请参阅W3Schools。
2. 使用 Flex Container 水平排列 header 和 main 元素
通过在 .container 元素中添加以下样式，我们可以让 header 和 main 元素在 Flex Container 中水平排列。
.container {
display: flex;
flex-direction: row;
}
.header, .main {
flex: 1;
}这将 flex-direction 属性设置为 row，是主轴变为水平向右延伸。通过将 header 和 main 的 flex 属性都设置为 1，我们将它们平分父容器的宽度。
3. 把 main 元素分为 immersive-image 和 article 两部分
在 .main 元素中，我们可以使用以下样式将 immersive-image 和 article 两个元素分成两部分。
-- -------------------- ---- ------- ----- - -------- ----- --------------- ---- ---------------- -------------- - ---------------- - ----- -- - -------- - ------------ ----- ----- -- -
我们同样使用 Flex Container，并将这两个元素分别设置为 flex 属性为 1 和 2，以便在 .main 容器中平分主轴。通过为 .main 容器使用 justify-content: space-between，请确保左右两个子项之间留有空间。
4. 定义 sidebar 元素
最后，我们需要为 .sidebar 元素定义样式。这个元素将被垂直排列，紧贴在主体内容右侧。
.sidebar {
width: 200px;
margin-left: 50px;
}这里，我们将其宽度设置为 200px，并使用 margin-left 使其与主体内容和侧栏之间保留空白。
现在，运行上述样式，我们就可以得到哥布林布局的页面了！
总结
在本文中，我们讨论了 Flexbox 布局的一些基本概念，并展示了如何使用 Flexbox 实现 Fantasy 官网的哥布林布局。通过掌握这些概念和技能，您可以轻松地在您的网站中使用 CSS 进行高度灵活的页面布局。希望这篇文章可以帮助到您！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f40597d4982a6eb8377ea