背景

我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。

学问必须合乎自己的兴趣,方可得益。 ——莎士比亚

上篇习题解析

上一篇结尾留了一个小习题，栅格化布局是如何实现。再讲如何实现之前，我们再看一下栅格化布局的描述

栅格化布局会将容器 24 等分，横向排列的盒子数量最多四个，最少一个。

• 父元素上设置 flex-flow 属性，它用于设置弹性盒模型对象的子元素排列方式。它是 flex-direction 和 flex-wrap 属性的复合属性。 flex-direction 值为 row 时表示横向排列，flex-wrap 的值为 wrap 表示可以在必要的时候拆行或拆列。

• 子元素上设置 flex 属性，可以设置弹性盒模型对象的子元素如何分配空间，即可以实现等分功能；

• 两个属性结合使用，便实现了栅格化布局

https://code.juejin.cn/pen/7129126203998339102

知识点讲解

今日主要讲讲 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"。

讲解代码

https://code.juejin.cn/pen/7129148363945017376

讲解代码操作步骤

演示代码都可通过代码复制拷贝到本地的 IDE 中进行演示。也可以自己照着敲击学习。

第一步：选中一个想查看代码的功能项；

第二步：将查看的功能的代码进行复制；

第三步：将代码粘贴到一个空档 html 文档中；

第四步：右键操作这个新建的 html 文档，选择在浏览器中打开，刚才的功能就在页面中出来啦。

一个小习题

我们偶尔在浏览网页的时候，会看到进度条加载的动画。进度条加载动画，一般是将某个背景色从 0 或者某个位置到达 100%，铺满整个容器。如何实现进度条加载动画？解答方案会在下篇文章中给出。

image

总结

无论是栅格化布局，还是其他相适应布局、各种对齐格式，很大一部分的布局场景，都可以使用 flex 实现。可以在实践过程中，体会它的巧妙之处。

有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。

前端的千变万化，源于对前端知识的融会贯通。