携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
背景
我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。
学问必须合乎自己的兴趣,方可得益。 ——莎士比亚
上篇习题解析
上一篇结尾留了一个小习题，栅格化布局是如何实现。再讲如何实现之前，我们再看一下栅格化布局的描述
栅格化布局会将容器24等分，横向排列的盒子数量最多四个，最少一个。
- 父元素上设置flex-flow 属性，它用于设置弹性盒模型对象的子元素排列方式。它是 flex-direction 和 flex-wrap 属性的复合属性。 flex-direction值为row时表示横向排列，flex-wrap 的值为wrap表示可以在必要的时候拆行或拆列。
- 子元素上设置flex 属性，可以设置弹性盒模型对象的子元素如何分配空间，即可以实现等分功能；
- 两个属性结合使用，便实现了栅格化布局
知识点讲解
今日主要讲讲flex的功能。
好玩的布局
| 类型 | 效果展示 | 实现方案 |
|---|---|---|
| 栅格化布局 | 栅格化布局会将容器24等分，横向排列的盒子数量最多四个，最少一个。父元素上设置flex-flow 属性，它用于设置弹性盒模型对象的子元素排列方式。它是 flex-direction 和 flex-wrap 属性的复合属性。 flex-direction值为row时表示横向排列，flex-wrap 的值为wrap表示可以在必要的时候拆行或拆列。子元素上设置flex 属性，可以设置弹性盒模型对象的子元素如何分配空间，即可以实现等分功能；两个属性结合使用，便实现了栅格化布局 | |
| 柱状图 | 将父元素的align-items属性的值设置为flex-end，可以将高低不等的子元素置于父元素底部。 | |
| 圣杯布局 | 圣杯布局是指两边容器宽度固定，中间容器自适应的三栏布局。左右两边的容器通过设置flex的值为0 0 80px实现宽度固定位80px;中间容器通过设置flex的值为1，等分剩余空间，自动放大占位，即自适应。 | |
| 瀑布式布局 | 瀑布的列展示，通过为父元素设置column-count的属性值实现，如图每行会展示3列，即column-count:3。列之间的距离，通过为父元素设置column-gap元素的值为1em，实现列之间的间隙，即column-gap:1em。 |
讲解代码
讲解代码操作步骤
演示代码都可通过代码复制拷贝到本地的IDE中进行演示。也可以自己照着敲击学习。
第一步： 选中一个想查看代码的功能项；
第二步： 将查看的功能的代码进行复制；
第三步： 将代码粘贴到一个空档html文档中；
第四步： 运行这个新建的html文档，刚才的顶部模块功能就出来啦。
一个小习题
我们偶尔在浏览网页的时候，会看到进度条加载的动画。进度条加载动画，一般是将某个背景色从0到100%，铺满整个容器。如何实现进度条加载动画？解答方案会在下篇文章中给出。
总结
无论是栅格化布局，还是其他相适应布局、各种对齐格式，很大一部分的布局场景，都可以使用flex实现。可以在实践过程中，体会它的巧妙之处。
有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。
前端的千变万化，源于对前端知识的融会贯通。