第2天：图解 FlexBox 布局（上）

今天介绍一种非常重要的布局方式 FlexBox，它不仅在前端中应用广泛，同时在移动端也占有非常重要的地位，比如 iOS 中的UIStackView，Facebook 的 Yoga 库；微信小程序和 RN 都支持这种布局方式。各大浏览器对 FlexBox 支持比较完善，尤其对于移 Web，iOS 和 Android 在很早的版本中就支持了这种布局。所有我建议无论是移动端，还是泛前端的同学都应该学习一下这种布局方式。

很早以前，做小程序的时候我便开始接触这种布局方式，开始时主要看了网上几篇关于 FlexBox 布局的讲解，但是看完还是比较模糊，我一直寻找比较官方的介绍，直到学前端的时候才找到了 MDN，看完 MDN 上的介绍使我对 FlexBox有了深刻的理解。学习这种布局方式建议以官方文档为主，其它教程为辅。

这是我第 3 次写 FlexBox 布局教程，希望这次能把它写的更通俗易懂。理解 FlexBox 布局的关键点是理解它的「弹性」，它可以通过父元素来控制子元素如何布局。比如通过一个 400*100 的flex容器（上文中的父元素），控制 3 个子元素的不同显示方式，如果使用其它布局方式，会有这么简单吗？

而且代码很简单：

.main {    background-color: antiquewhite;    display: flex;    width: 400px;    height: 60px;    flex-direction: row;    margin-bottom: 10px;}.space-around {    justify-content: space-around;}.center {    justify-content: center;}.end {    justify-content: flex-end;}

<div class="main">    <div>前端小课</div>    <div>FlexBox布局</div>    <div>公众号：素燕</div></div>

如果某个元素想采用 FlexBox 布局，需要通过 display: flex 来指定，一旦指定这个 CSS 属性，它将变成 Flex 容器（ flex container ），它的「直接子元素」即可通过 flex 布局属性来控制其显示方式，这些「直接子元素」被称为 flex-item 。

网上流传盛广的一张图：

这种图没问题，但是读者往往会忽略这张图的一个前提条件：布局方向。FlexBox 布局可以通过 flex-direction 来控制 flex-item 的布局方向。在不同的布局方向下，这张图的表现形式是不一样的，以至于“我”以前一直以为主轴是水平方向，纵轴是垂直方向，后来我发现我被误导了。这张图完全可以改善一下：

需要解释几个概念：
flex-container ：布局容器，使用 display：flex 的标签；
flex-item : 容器中的直接子元素；
main-axis ：主轴，布局方向为 row 或者 row-reverse 时它是水平方向。布局方向为 column 或者 column-reverse 时它是垂直方向。
cross-axis : 纵轴，与主轴垂直的轴；
main-start : 主轴的起点，布局方向为 row 时它的起点在左侧，row-reverse 为右侧。布局方向为 column 时起点在顶部，column-reverse 时起点为底部。
main-end : 主轴结束的点，与 main-start 相反；
cross-start : 纵轴的起点；
cross-end ：纵轴的结束点，与 cross-start 相反；

flex-container 和 flex-item 都有自己的属性，容器的属性是用来控制所有 flex-item 的布局，以「组」的形式来控制 item 的排列方式。而 item 的属性是用来「单独」控制自己该如何显示。常用的属性：

容器属性

1.flex-direction: 布局方向，它决定 flex-item 是从左到右、从右到左、从上到下、还是从下到上进行布局，它会影响主轴的方向，以及items 的布局起点位置。它主要包含 4 个值：
row（默认）：从水平方向的左侧开始布局；
row-reverse：从水平方向的右侧开始布局；
column：从垂直方向的顶部开始布局；
column-reverse: 从垂直方向的底部开始布局；

.main {    display: flex;    flex-direction: row;}

2. justify-content : 它决定「 主轴 」items 的对齐方式，flex-direction 会影响主轴的方向，这一点需要注意，主轴不一定是水平方向，不能把 justify-content 看做是控制水平方向的对齐方式。它主要有以下几个值：
flex-start（默认）：与主轴的起始位置（main start）对齐；
flex-end：与主轴的结束位置（main end）对齐；
center：居中于主轴；
space-around: 左右边距是中间的 1/2；
space-evenly: 每个 item 的间距相等；
space-between: 左右无边距；
下图是 flex-direction: row 的情况：

把 flex-direction: 改为 column 后主轴发生了变化，需要容器的高度大于所有 item 的高度才能看出效果，把所有的 item 进行垂直对齐，效果如下：

3.align-items: 它决定「纵轴」items 的对齐方式，flex-direction 会影响纵轴的方向，这一点需要注意，纵轴不一定是垂直方向，不能把 align-items 看做是控制垂直方向的对齐方式。它主要有以下几个值：
flex-start（默认）：与纵轴的起始位置（cross start）对齐；
flex-end：与纵轴的结束位置（cross end）对齐；
center：居中与纵轴；
baseline：与基线对齐；
stretch：扩展满纵轴；

4.flex-wrap: items 超出容器后该如何显示，是否要多行显示。如果为多行显示，可以把每行看做是一个容器，图中主轴对齐方式为 space-around，每行对齐方式都为 space-around。它有以下几个值：
nowrap（默认）：单行显示；
wrap：多行显示；
wrap-reverse：多行显示；

5.flex-flow: 它是 flex-direction 和 flex-wrap 的简写，比如 flex-flow: row nowrap，表示 flex-direction 为 row，flex-wrap 为 nowrap。
6.align-content: 如果为「多行」时，它表示在「 纵轴 」方向的对齐方式。它的值与 justify-content 值相同。

总结

今天介绍了与 FlexBox 容器相关的属性，理解这些属性需要注意 flex-direction 会影响主轴的方向，而属性 justify-content、align-items、align-content 的对齐方式是按照轴进行对齐，所以在布局的时候要确认布局的主轴方向。下节课程介绍 flex-item 相关的属性。

前端下课的 demo 以后都统一放到这里，star 以备忘 ：
https://github.com/lefex/FE/tree/master/%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5/demo/flex

今天的有效打卡指令（任意一个）：

1. flex-container 都有哪些属性？

2. 你对 FlexBox 布局有什么疑惑的地方？

3. FlexBox 布局有哪些优点与缺点？

---

推荐阅读：

坚持学习前端的第20天
BAT前端团队
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox