CSS3之flex布局

若要使用flex布局，需在父元素上声明“ display : flex ”,这样它所有的直系子元素就成为flex元素

1.居中

1）垂直居中：align-items : center

2）水平居中：justify-conter : center

3）垂直水平居中：align-items : center;

　　　　　　　　  justify-content : center;

2.横向排列元素

div:nth-child(1) { justify-content: flex-start; }            ------------- 居左

div:nth-child(2) { justify-content: flex-end; }             ------------- 居右

div:nth-child(3) { justify-content: space-between; }  ------------- 首尾两个元素挨着容器边缘，中间的其他元素平均排列

div:nth-child(4) { justify-content: space-around; }    -------------  首尾两个元素与容器边框的距离是元素之间间距的一半，各元素平均排列。

3.纵向排列元素

当子元素纵向排列时，在容器中增加 "flex-direction: column"

4.轴

flex布局引入了“轴”的概念(即像数轴那样有方向的线)

flex轴类型：

　　主轴：子元素延伸的方向，

　　交叉轴：与“主轴”垂直的轴

flex-direction：用于设置主轴的方向，默认:row (另一个：column)

justify-content：center ，表示子元素在主轴方向上居中；

align-items：center，表示子元素在交叉轴方向上居中；

随着主轴方向的变化，这两个属性的含义会发生变化，如表1-1

　　　　　　　　　　　　　　表1-1

主轴方向	flex-direction	justify-content:center	align-items:center
从左到右	row	水平居中	垂直居中
从上到下	column	垂直居中	水平居中

-------------------------------------------------------------------------------------------------------------------------