本文仅对作者常用的一些布局分享给大家，有错误之处还请指正，多谢包涵！ 1.flex 弹性布局 flex 弹性布局常用语移动端，好像 PC 端会有兼容问题？总的来说，在比较新的现代浏览器中，如 chrom, 火狐等支持度应该还是不错的，IE暂不考虑了，要做兼容的同学可以百度一下其兼容性。
基本用法：
div{ display: flex; /* 使用 flex 布局 */ }在要添加的盒子上添加改样式后，盒子内的元素会默认排成一排，类似给盒子中的元素加了 float 一样， flex-direction flex-direction: row; 设置 flex 排列方式：横排（从左到右，默认）
flex-direction: column; 设置 flex 排列方式：竖排（从上到下） 另外还有这两个值，但是不经常用，有特殊要求的可能会用到。 row-reverse 设置 flex 排列方式：横排（从右到左） column-reverse 设置 flex 排列方式：竖排（从下到上）
flex-warp 是否换行 flex-warp:nowarp; 不换行 warp; 换行 wrap-reverse;反向换行（从右到左）
justify-content 水平对齐方式 justify-content: flex-start; 顶端对齐（默认方向从左到右，所以一般是向左靠齐） justify-content: center; 居中对齐 flex-end;尾端对齐(一般是靠右对齐) space-between;两端对齐(左右两边分别对齐顶端，剩余的平分) space-around; 周围对齐(元两端的空白相等，元素之间的间隔是两边的2倍) justify-content:space-evenly； 均匀对齐(留白处都是相等的) align-items 垂直对齐方式 align-items:flsex-start; 顶端对齐(一般是靠上对齐) align-items: center;居中对齐 align-items: flex-end;底部对齐（一般是靠下对齐）
有关更多想深入了解的可以参考： 阮老师的日志 菜鸟教程
