flex布局

http://blog.csdn.net/magneto7/article/details/70854472
flex的核心概念就是父容器，子容器，主轴和交叉轴这4个概子容器也念组成
flex布局总共涉及到12个css属性，父容器，子容器个6个，常用的只有4个，子容器2个父容器2个
容器： 父容器可以设置字容器的排列方式，子容器也可以单独设置，如有重复以子容器为主。
父容器：justify-content（水平居中）align-items（垂直居中）
子容器：flex（子容器的伸缩比例）align-self（）
box{
display: -webkit-flex; /* Safari */
display: flex;
}
flex-direction 项目的排列方向
flex-wrap 一条轴线排不下，如何换行
flex-flow flex-direction和flex-wrap简写
justify-content 项目在主轴上的对齐方式。11
align-items 义项目在交叉轴上如何对齐 11
align-content 多根轴线的对齐方式

order 项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow 项目的排列顺序。数值越小，排列越靠前，默认为0
flex-shrink 属性定义了项目的缩小比例，默认为1，
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写 11
align-self 性允许单个项目有与其他项目不一样的对齐方式 11

image.png