一、前言
就我个人目前写过的几个前端应用来看，css的重点主要在两个方面：
- 标签美化
- 页面布局
至于其它，比如动画效果之类的东西，实际前端项目中用的其实并不多，因为这些东西虽然可能稍微复杂一点，但其适用性却是非常广泛的。
因此只要你没有太大的定制化需求，那么直接开源库使用就行了。
比如当网页加载时可能会看到“转圈”的图标，这种图标你完全是不需要自己去写的，直接找相关的开源库复制一份即可，毕竟这种东西太通用了。
其中标签美化是基础，也就是前一章我们所学到的各种css属性，用于设置标签的颜色、大小、状态等等。
而页面布局就是本章重要介绍的内容了。
css中布局也有很多种类，比如前文提到的“定位”、“浮动”等等，其实也可以算是布局的一种。
不过本文的重点并不是它们，而是更为通用、近乎万能的flex布局。
二、flex布局
1.基本介绍
flex布局是目前最常用的布局方式，你目前所看到的这个网页，可以说超过九成的内容都是我用flex布局写出来的，由此可见flex布局的强大，它基本能满足你绝大部分的需求。
对于没有使用flex的普通标签元素来说，它们是根据前文基础章节中介绍过的“显示模式”来默认布局的，也就是前面提到过的“块模式”“行内块模式”“行内模式”。
例如下面这个例子：
所以上面的渲染结果可以这样解释：
p标签默认为块模式，所以占据第一行。img与span标签分别为行内块与行内模式，共同占据第二行，并且该行的高度由最高的img所决定。
如果不使用flex，那么正常来说你如果想要布局，那就只能调整各个元素的宽高、设置其“显示模式”，才能最终达到效果。
比如现在我想要让三个标签处于同一行，同时p、span标签各自占据200px宽度在两侧，而img标签占据中间剩余的全部宽度。
这种需求是非常常见的，比如你目前所看到的文章页面，左边的空白、右边的信息卡片就占据了固定大小，而中间的文章标签就占据了页面剩余的宽度。
这种情况下，甚至你是很难使用传统的布局方式实现的，但flex布局却可以轻松做到这一点：
此时就发挥div容器标签的作用了，由于它本身不包含任何东西，所以是最适合使用布局的标签。
