常见CSS布局(1) | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
前言
温馨提示：本文较长，本来是想写一篇关于CSS布局方式的，但是CSS布局方式太多以及实现方法太多，本文就详细介绍flex和gird布局。
传统盒子模型
我们最传统的布局方式就是盒子模型，使用display属性+position属性+float属性。这个大家就都很熟悉了，不熟悉的同学赶紧去恶补。
文档流布局
这是最基本的布局，就是按文档的要求一个一个显示出来，块元素占一行，行内元素共用一行，这个我想大家就很熟悉了，我就不多说了。
定位布局
我们乐意通过position属性进行定位，这个大家也很熟悉，我也不多说了。
flex布局
仅仅通过上面的3种布局方式还是有一定的缺陷的，就比如我们不能只用一个属性来实现垂直居中布局，这时候我们的第四种布局方式就诞生了：flex布局。
什么是flex布局
flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
采用 flex 布局的元素，称为 flex 容器（flex container），它的所有子元素自动成为容器成员，称为 flex 项目（flex item）。 flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列等。
PS：将父盒子设为 flex 布局以后，子元素的 float（浮动）、clear（清除浮动）和 vertical-align（垂直居中）属性将失效。
