css3 弹性盒子

display:-webkit-flex 定义元素为弹性盒子;

属性:

direction(方向)
flex-direction : row //默认值,子元素正向1 2 3 布局
flex-direction : row-reverse //子元素正向3 2 1 布局

flex-direction:column; //纵向布局 1 2 3
flex-direction:column-reverse; //纵向布局 3 2 1

flex-wrap
-webkit-flex-wrap : nowrap; //默认值,固定像素的子元素会自动按比例缩放
-webkit-flex-wrap : wrap; //固定像素的子元素不会自动缩放,而是自动换行
-webkit-flex-wrap : wrap-reverse //与wrap一样,但是布局是3 2 1

justify-content 父容器水平位置的定位
justify-content : flex-start; //右对齐
justify-content : center; //居中
justify-content : flex-end; //左对齐
justify-content : space-around; //自动对齐
justify-content : space-between; //两端对齐

align-items 父容器垂直位置的定位
align-items : flex-start; //上对齐
其他与justify一样

aligh-self 子元素的垂直定位
与父容器定位方式一致