常见的布局有哪些？
1.最常见布局 浮动、定位
2.自适应布局 百分比布局
3.响应式布局 @media媒体查询
4.弹性布局 display:flex 将对象最为弹性伸缩盒子显示 (适用于父类容器元素上)
Flex是Flexible Box的简称，意为弹性布局，顾名思义，在网页布局时，他可以给我们提供更多的灵活性。
display 弹性布局版本
display:box （伸缩盒老版本） 2009版
display:flexbox（伸缩盒过渡版本） 2011版
display:flex (伸缩盒新版本)2013版
1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。
2.设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用。
3.设置了display:flex属性的元素，称为Flex容器，他里面的所有子元素统称为容器成员，称为Flex项目，设置或检索伸缩盒对象的子元素如何分配空间。
父级：display:flex;
子级：flex1; flex1.2; flex2; (子级可为小数和自然整数)
justify-content: flex-start | flex-end | center | space-between | space-around;
属性定义了Flex项目在主轴方向上的对齐方式
属性 / 值详细说明
flex-start 类似于左浮动（float：left)
flex-end 类似于右浮动（float:right）
center Flex项居中
space-between 两端对齐容器，各个Flex项目之间的间距相等
space-around 每一个Flex项目两侧的间隔相等
align-items:center (在 display:flex; 属性后加该属性，可使子元素垂直居中)
参考地址：
http://justcode.ikeepstudying.com/2015/10/css3-flex-弹性布局用法详解/
