总的来说 Web 布局经历了以下四个阶段：
1、table表格布局，通过 Dreamweaver 拖拽表格或者手写 table 标签布局。
2、float浮动及position定位布局，借助元素盒模型本身的特性以及 float position 等属性等进行布局。
3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点：排列方向、对齐方式，自适应尺寸，是目前最为成熟和强大的布局方案。
4、grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局。
flex布局
使用flex布局实现上是使元素FFC化(flex formatting context伸缩格式化上下文)，FFC是普通流的一种，而浮动流和定位流以及CSS其他属性对FFC是有影响的。
子元素的这些属性将失效：
[1]float、clear和vertical-align属性在伸缩项目上没有效果。
[2]伸缩容器的margin与其内容的margin不会重叠。
[3]text-align属性在伸缩容器上没有效果，因为其只可应用于块级block容器。
弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于block和inline-block的区别，一个独占一行，另一个非独占一行。
伸缩容器：
容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。
容器的属性：
flex-direction: column row row-reverse column-reverse
flex-wrap: nowrap wrap wrap-reverse
justify-content: flex-start flex-end center space-between space-around
align-items: flex-start flex-end center baseline stretch
align-content: flex-start flex-end center space-between space-around
伸缩项目
项目的属性：
order: 1;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
align-self: flex-end;
flex布局是不支持ie8的，所以建议，如果要做兼容ie8的pc端项目，还是老老实实用浮动布局吧。
flex兼容处理
flexbox布局的语法规范经过几年发生了很大的变化。从2007年07月，flex第一版本的工作草案发布，到2012年09月，flex最新版本成为候选推荐。flex主要经历了三个版本。
【1】旧版本 display:box | inline-box;
IE浏览器不支持，windows下的safari浏览器只支持旧版本的写法且需要添加前缀，移动端可以兼容到andriod2.1-4.3和ios3.2-6.1也需要添加前缀。
【2】混合版本 display:flexbox | inline-flexbox;
该版本只有IE10支持，且需要添加前缀-ms-
【3】新版本 display: flex | inline-flex
该版本兼容IE11+、firefox、safari、chrome、opera及移动端，但移动端ios7.1-8.4需要添加前缀-webkit-。
【伸缩项目】
- 伸缩容器
display: -webkit-box-webkit-inline-box - 伸缩项目
display：inlineinline-blockblock
旧版本flex要求伸缩项目必须是block元素。
【兼容写法】
/*display*/
.display_flex{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.display_flex > *{
display: block;
}
.display_inline-flex{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.display_inline-flex > *{
display: block;
}
/*伸缩流方向*/
.flex-direction_column{
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-content_flex-end{
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-content_flex-justify{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-items_flex-end{
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.align-items_center{
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.align-items_baseline{
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/*伸缩性*/
.flex_auto{
-webkit-box-flex: 1;
-ms-flex: auto;
-webkit-flex: auto;
flex: auto;
}
.flex_1{
width: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
/*显示顺序*/
.order_2{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.order_3{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
网格布局
CSS网格布局和弹性盒布局的主要区别在于弹性盒布局是为一维布局服务的（沿横向或纵向的），而网格布局是为二维布局服务的（同时沿着横向和纵向）。这两个规格有一些相同的特性。
当抉择该用网格还是弹性盒时，你可以问自己一个简单的问题：
- 我只需要按行或者列控制布局？那就用弹性盒子
- 我需要同时按行和列控制布局？那就用网格
从内容出发还是从布局入手?
除了一维和二维布局之间的区别，还有一种办法决定该使用弹性盒还是网格来布局。弹性盒从内容出发。一个使用弹性盒的理想情形是你有一组元素，希望它们能平均地分布在容器中。你让内容的大小决定每个元素占据多少空间。如果元素换到了新的一行，它们会根据新行的可用空间决定它们自己的大小。
