背景
我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。
学问必须合乎自己的兴趣,方可得益。 ——莎士比亚
上篇习题解析
上一篇结尾留了一个小习题，栅格化布局是如何实现。再讲如何实现之前，我们再看一下栅格化布局的描述。(点击查看完整代码)
栅格化布局会将容器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。 |
知识点
以下知识内容来自于菜鸟教程
属性名 | 作用 | 属性值 |
flex | 用于设置或检索弹性盒模型对象的子元素如何分配空间。 是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 | flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 flex-basis：项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 auto：与 1 1 auto 相同。 none：与 0 0 auto 相同。 initial：设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。 inherit：从父元素继承该属性。请参阅 inherit。 |
flex-flow | 用于设置或检索弹性盒模型对象的子元素排列方式。 | flex-direction： 可能的值：row、row-reverse、column、column-reverse、initial、inherit 默认值是 "row"。规定灵活项目的方向。 flex-wrap： 可能的值：nowrap、wrap、wrap-reverse、initial、inherit 默认值是 "nowrap"。规定灵活项目是否拆行或拆列。 initial：设置该属性为它的默认值。请参阅 initial。 inherit：从父元素继承该属性。请参阅 inherit。 |
flex-direction | 规定灵活项目的方向。 | row ：默认值。灵活的项目将水平显示，正如一个行一样。 row-reverse ：与 row 相同，但是以相反的顺序。 column：灵活的项目将垂直显示，正如一个列一样。 column-reverse：与 column 相同，但是以相反的顺序。 initial：设置该属性为它的默认值。请参阅 initial。 inherit：从父元素继承该属性。请参阅 inherit。 |
flex-grow | 用于设置或检索弹性盒子的扩展比率。 | number：一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。 initial：设置该属性为它的默认值。请参阅 initial。 inherit：从父元素继承该属性。请参阅 inherit。 |
flex-wrap | 规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。 | nowrap：默认值。规定灵活的项目不拆行或不拆列。 wrap：规定灵活的项目在必要的时候拆行或拆列。 wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 initial：设置该属性为它的默认值。请参阅 initial。 inherit：从父元素继承该属性。请参阅 inherit。 |
flex-basis | 用于设置或检索弹性盒伸缩基准值。 | number：一个长度单位或者一个百分比，规定灵活项目的初始长度。 auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。 initial：设置该属性为它的默认值。请参阅 initial。 inherit：从父元素继承该属性。请参阅 inherit。 |
flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 | number：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。 initial：设置该属性为它的默认值。请参阅 initial。 inherit：从父元素继承该属性。请参阅 inherit。 |
align-items | 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 | stretch：默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 center：元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 flex-start：元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end：元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 baseline ：元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 initial：设置该属性为它的默认值。请参阅 initial。 测试 » inherit：从父元素继承该属性。请参阅 inherit。 |
column-gap | 指定的列之间的间隙。 | length：一个指定的长度，将设置列之间的差距。 normal：指定一个列之间的普通差距。 W3C建议1EM值。 |
column-count | 指定某个元素应分为的列数。 | number：列的最佳数目将其中的元素的内容无法流出。 auto：列数将取决于其他属性，例如："column-width"。 |
讲解代码
讲解代码放到了在线预览平台。
讲解代码操作步骤
演示代码都可通过代码复制拷贝到本地的IDE中进行演示。也可以自己照着敲击学习。
第一步：选中一个想查看代码的功能项；
第二步：将查看的功能的代码进行复制；
第三步：将代码粘贴到一个空档html文档中；
第四步：右键操作这个新建的 html 文档，选择在浏览器中打开，刚才的功能就在页面中出来啦。
一个小习题
我们偶尔在浏览网页的时候，会看到进度条加载的动画。进度条加载动画，一般是将某个背景色从0或者某个位置到达100%，铺满整个容器。如何实现进度条加载动画？解答方案会在下篇文章中给出。
总结
无论是栅格化布局，还是其他相适应布局、各种对齐格式，很大一部分的布局场景，都可以使用flex实现。可以在实践过程中，体会它的巧妙之处。
有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。
前端的千变万化，源于对前端知识的融会贯通。
标签：flex,initial,前端,元素,趣学,inherit,默认值,属性 From： https://blog.51cto.com/u_15838863/6055569