css3弹性盒子

display：flex；定义弹性盒子

1.flex-direction

弹性盒子中子元素的排列方式

flex-direction

flex-direction	属性
row	默认值，作为一行水平地显示内容
row-reverse	等同行，但方向相反
column	作为列，垂直地显示内容
column-reverse	等同列，但方向相反

2.flex-wrap

设置子元素超过父元素后是否自动换行

flex-wrap

flex-wrap	属性
nowrap	默认值，规定弹性项目不会自动换行
wrap	规定弹性项目会在需要时换行
wrap-reverse	规定弹性项目会在需要时换行，但会反向

注：flex-flow为flex-direction和flex-flow的简写，可同时取两者的值

3.align-items

设置弹性盒子在纵轴上的对齐方式

align-items

align-items	属性
stretch	默认，项目被拉伸以适应容器
center	位于容器中央
flex-start	位于容器开头
flex-end	位于容器末尾
baseline	被定位到容器的基线

4.align-content

修改flex-wrap的方式

align-content

align-content	属性
stretch	默认值，拉伸以占据剩余空间
center	朝着弹性容器的中央对行打包
flex-start	朝着弹性容器的开头对行打包
flex-end	朝着弹性容器的结尾对行打包
space-between	行均匀分布在弹性容器内
space-around	行均匀分布在弹性容器中，两端各占一半

5.justify-conent

设置弹性盒子在横轴上的对齐方式

justify-content

justify-content	属性
flex-start	默认值，项目位于容奇的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中央
space-between	项目在行与行之间留有间隔
space-around	项目在行之前，行之间，行之后留有间隔