css3的Flex布局

弹性布局，为盒模式提供最大的灵活性

块状元素

.box {

  display: flex;

  display: -webkit-flex;

}//容器

行内元素

.box {

  display: inline-flex;

}

.item {}//项目

容器属性：

flex-direction 主轴方向，row，row-rerverse ，column，column-reverse

flex-wrap 换行方式，nowrap,wrap,wrap-reverse

flex-flow direction 和wrap组合

justify-content 主轴排列方式，flex-start,flex-end,center,space-between,space-around

align-items 次轴排列方式 flex-start,flex-end,center,stretch,baseline

align-content 多根轴线对齐方式，flex-start.flex-end,space-between,space-around,strectch,

项目属性：

order 排列顺序，int型

flex-grow 放大比例，int型，默认0，不放大，

flex-shrink 缩小比例，int型，默认1，不缩小

flex-basis 项目占据空间，如200px，分配给主轴方向大小比例的空间

flex： grow,shrink,basis组合 默认 0 1 auto

align-self 允许与其他项目不一样的对齐方式，flex-start，flex-end，auto继承，center，baseline，stretch