CSS Flexbox 布局完全指南 （二）：3000字，多示例讲解
CSS Flexbox 布局完全指南 （二）：3000字，多示例讲解
理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。
在《CSS Flexbox 布局完全指南 Part 1（含示例）》中，我们介绍了如何用 Flexbox 制作一个影片集，如何通过 Flexbox 布局卡片，如何使用 Flexbox 创建网格布局。现在我们继续介绍更多示例。
示例四：如何使用 Flexbox 构建网站布局
社区的伙伴们通常不建议整个网站布局都使用 Flexbox。
虽然我赞同这个观点，但是我也认为在特定的情况下你可以不用考虑这么多。
我能给到最重要的一点建议是：在你需要的时候使用 Flexbox 布局。
我会在下面的例子中解释这点。
圣杯布局
“圣杯布局”是经典的布局方式。
圣杯布局：头部，页脚和 3 个其他容器
有两种 Flexbox 方式可以实现这种布局。
第一种是用 Flexbox 来实现布局。把 header、footer、nav、article 和 aside 都放在一个 flex-container 容器里。
我们开始吧。
标识语言
看一下下面这个基本的标识文本：
<body> <header>Header</header> <main> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside> </main> <footer>Footer</footer></body>圣杯布局遵循了一条特殊的规则：
中间的那列 article 应该在 nav 和 aside 两个侧边栏之前显示出来。
<article></article> 居中布局且先显示在页面上
建立一个 Flexbox 格式文本
body { display: flex}因为子元素应该从顶部到底部布局，所以我们要改变 Flexbox 的默认方向。
body { ... flex-direction: column}- header 和 footer 要有固定的宽度
header,footer { width: 20vh /*you can use pixels e.g. 200px*/}- main 要填满 flex-container 中剩下的部分
main { flex: 1}你一定没忘记，flex: 1 表示 flex-grow: 1，flex-shrink: 1 和 flex-basis: 0。
这可以让 main “变大”填满剩下的可用空间
此刻，我们要开始考虑 main 中的 article，nav 和 aside 三个部分。
把 main 设成一个 flex-container：
main { display: flex}给 nav 和 aside 设置固定的宽度：
nav,aside { width: 20vw}然后确保 article 填满剩下的可用空间：
article { flex: 1}
现在 article 填满剩下的可用空间
现在还需要做一件事：把 flex-items 重新排序，这样 nav 会展示在第一位。
nav { order: -1}最终效果：
https://codepen.io/ohansemmanuel/full/brzJZz/
order 属性用来重新排序 flex-items 的位置。
容器中所有 flex-items 都会以递增的 order 值排列， flex-item 中 order 值最小的会排列在最前面。
所有的 flex-items 元素默认 order 值都是 0。
圣杯布局（另一种布局方式）
之前的方式是把 flex-container 作为一个整体的容器，这个布局非常依赖 Flexbox。
我们来了解一种更为适合的方法。首先再来看下最终要达到的效果：
圣杯布局
header 和 footer 可以被当作块状元素。在没有任何干预的情况下，它们会在从顶部到底部，填满父级元素。
<body> <header>Header</header> <main> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside> </main> <footer>Footer</footer></body>使用这种方法，唯一需要作为 flex-container 的就是 main 元素。
使用这个方法有个缺点就是你要自己计算 main 的高度。main 应该填满除 header 和 footer 外的空间。
main { height: calc(100vh - 40vh);}上面的代码块使用 CSS 中的 calc 来计算 main 的高度。
不管怎样，main 的高度都要等于 calc(100vh — height of header — height of footer)。
在之前的解决方案中，header 和 footer 都有一个固定的高度，接下来再通过同样的方法计算 main 的高度。
你可以在这里查看最终效果：
https://codepen.io/ohansemmanuel/full/brzybZ/
两列网页布局
两列布局很常见，这也可以用 Flexbox 轻松实现。
包含边栏和主内容的两列布局
看下以下标识文本：
<body> <aside>sidebar</aside> <main>main</main></body>先建一个 Flexbox 格式文本：
body { display: flex;}给 aside 一个固定的宽度：
aside { width: 20vw}最后，确保 main 填满剩下的可用空间：
main { flex: 1}这样就差不多可以了。
示例五：使用 Flexbox 布局媒体对象
媒体对象随处可见，从 Twitter 到 Facebook 上的帖子，大部分页面设计似乎都会选择媒体对象。
Twitter 和 Facebook 上的发帖示例
看下下面这个标识文本：
<div class="media"> <img class="media-object" src="/pic.jpg"> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div></div>你应该已经猜到了，.media 会使用 Flexbox 布局：
.media { display: flex}container 中的 flex-items 默认是在 flex-container 中垂直拉伸，填满可用高度。
确保 .media-body 填满剩下的可用空间：
.media-body { flex: 1}
左边的盒子拉伸填满可见屏幕，媒体主体在媒体对象（白色部分）内横向填满剩下的空间
我们来调整下拉伸的盒子模型。
.media { ... align-items: flex-start}
弹性项目在媒体对象中从起点对齐，现在图片保持默认大小，没有变形拉伸:)
翻转媒体对象
翻转媒体对象是图片在媒体对象的另一边（右边）
创建画报媒体对象不需要改变 html 元素的顺序。
只需要让弹性项目像这样重新排序：
.media-object { order: 1}
这样图片就会排列在 .media-body 和 media-heading 之后。
媒体对象的嵌套
你甚至可以不改变已有的 CSS 样式来继续用嵌套布局媒体对象。
<div class="media"> <img class="media-object" src="/pic.jpg"> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> <!--nested--> <div class="media"> <img class="media-object" src="/pic.jpg"> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div> </div><!--end nested--> </div> </div>可以了！
媒体对象在其中嵌套布局
Unicode 媒体对象
我们不用只拘泥于图片。在不改变已经写好的 CSS 样式情况下，可以用 Unicode 来代替图片。
<div class="media"> <div class="media-object">?</div> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div></div>比如我们放一个 emoji 表情。
带有 emoji 表情的媒体对象
用一个包含相应编码的 div 来替换 img，显示想要的表情。你可以在 https://emojipedia.org/ 获取更多的 emoji 表情。
HTML 字符实体媒体对象
你也可以使用如下的 HTML 字符实体。
<div class="media"> <div class="media-object">☎</div> <div class="media-body"> <h3 class="media-heading"> Header </h3> <p></p> </div></div>这里使用的 HTML 字符实体是 ☎ ，效果如下：
你可以在这里查看这些例子的效果：
https://codepen.io/ohansemmanuel/full/jLJbGL/
示例六：如何使用 Flexbox 建立表单元素
现在很难找到没有一两个表单的网站了。
表格输入框，前后加其他元素
看下面这段标识文本：
<form class="form"> <input class="form__field"> <button class="form__item">…</button></form><form class="form"> <span class="form__item">…</span> <input class="form__field"></form><form class="form"> <span class="form__item">…</span> <input class="form__field"> <button class="form__item">…</button></form>这个例子展示了输入框与按钮或是文字的结合，我们仍可以用 Flexbox 轻松解决。
新建一个 Flexbox 格式文本：
.form { display: flex}确保输入框填满可用空间：
.form__field { flex: 1}最后，你可以按照你喜欢的方式在前后放入文字或者按钮。
.form__item { ... }你可以在这里看到这个例子的完整效果：
https://codepen.io/ohansemmanuel/full/ZJPmNj/
示例七：如何使用 Flexbox 来创建一个手机 App 布局
在这个例子中，我会带你一起来写如下的手机应用布局：
不过这个例子有点不同——为了让你来实践，我会解释创建手机布局的过程，你自己来尝试完成。
第一步
剥离出 iPhone 的页面布局，我们得到下面这个：
基本布局
第二步
将主体部分定义成一个 flex-container。
将格式化文本建立成一个弹性容器
第三步
flex-container 默认的 flex-direction 属性是 row。在这个例子中，我们要把它变成 column。
改变默认布局方向，得到 3 个子元素（即 flex-items）
第四步
给元素 1 和元素 3 一个固定的高度 height: 50px。
第五步
元素 2 要有一个填满可用空间的高度。使用 flex-grow 或是简写的 flex 写法 flex: 1 。
第六步
最后，像之前的例子一样，把每个块状元素当成一个媒体对象。
把内容块当成媒体对象
按照上面的六个步骤，你就可以成功创建一个手机应用布局。