1、弹性盒布局方式

CSS3弹性盒布局方式 - 简书

注意：需要在父元素中写：

display: flex;                                //必须写

flex-flow: wrap;                        //是否换行

align-items: 属性值                //纵向对其方式

justify-content: flex-start;        //横向对其方式

 2、网格布局

CSS Grid 网格布局教程 - 阮一峰的网络日志

注意，设为网格布局以后，容器子元素（项目）的

float、display: inline-block、display: table-cell、vertical-align和column-*

等设置都将失效。

注意：需要在父元素中写：

display: grid;                        //必须写

display: inline-grid;                //整体设为行内元素

grid-template-columns: 100px 100px 100px;                  //每一列的列宽

grid-template-rows: 100px 100px 100px;                        //每一行的行高

grid-template-columns: repeat(100px);                       //repeat()简化重复的值