首先可视化布局并确定哪些元素应转换为flex-containers。

虽然还有其他方法可以实现相同的布局（也许更好的方法），但我只使用flexbox，因为这是本文的重点。

第1步 - 编码前的计划

编码前的计划让我提前做出决定

• 要设计为flex-containers（也称为parent）的元素

• flex-items包含在你的flex容器（aka child）中

• 柔性容器的弯曲方向

如果没有计划，我可能会混淆要添加的样式，因为元素可以是flex容器，也可以是另一个flex容器的flex项。

我通过在笔记本上绘制页面轮廓来做我的计划，同时在下面标识哪些元素是flex-container和flex-items。

基于以上布局，我想实现以下目标：

A）用于在页面中显示内容的布局。即使我没有太多内容，我的页脚也会粘到页面底部。如果内容无法包含在页面中，我的页面将相应地扩展。

flex-container：body| flex-items：*header*，*main*和* footer*

B）导航项目可以根据屏幕尺寸从行到列排列切换。

flex-container：header| flex-items：nav1，nav2，nav3，nav4

C）主要内容集中。

flex-container：main| flex-items: box 1 and box 2

第2步 - 创建HTML文件

在造型之前输入html。

第3步 - 创建CSS文件

Flex-container 1

首先，我除去的默认边距和填充html和body元素，并添加100％的高度。

之后，我通过向body元素添加flex的显示来处理整个flex-container的flexbox属性。这会将body元素转换为弹性容器。

要在页面上垂直列出项目，我将flex的方向列添加到flex-container，然后向main元素添加1的flex，这是flex-items之一。

单值flex属性设置flex 项的增长方式，以适应其flex容器中的可用空间。通过将flex值设置为1，main同时将其他flex-items（header和footer）的flex属性保留为默认值（0），main将考虑到所需的空间后占用所有剩余空间header，main并且footer.

我从上到下添加样式，从标题开始，以页脚结束。

flex-container 2

对于标题，我将header元素转换为另一个flex容器，以将其内容显示为桌面视图中的一行。默认情况下，Flex项目按行排列。

我添加了justify-content: space-evenlyto 的属性，以header确保导航项正确间隔开。

默认marginul和li被删除。

flex-container 3

接下来，我研究main一个包含两个divs 的元素.box。

为了确保main中的内容居中，我转换main为一个flex-container并使用align-items和justify-content居中它的flex-items。Align-items用于沿横轴justify-content设置flex项目的样式，同时用于沿主轴设置flex项目的样式。

之后，我为footer元素添加颜色和填充以使其看起来更好。

最后，我使用媒体查询根据屏幕大小更改导航项的排列。这是通过flex-direction从行更改为列来完成的。

翻译自：
https://medium.com/swlh/how-i-use-flexbox-to-create-a-one-page-website-81db78e61738