flex布局学习

flex布局学习：
弹性布局（弹性盒模型）
    display:flex;
    display:inline-flex;
不同的浏览器要写不同的前缀：   display:-webkit-flex;
            display:-ms-flex;
            display:-moz-flex;
应用flex-box布局之后，子容器的float clear vertical-align将失效

父级元素属性：
    flex-direction：row | row-reverse | coloum | coloum-reverse
    flex-wrap:nowrap | wrap | wrap-reverse  
    换行方式：不换行    换原来的一行在下边
    flex-flow:前两者的简写形式  flex-flow: row nowrap(默认状态下)
    justify-content:              flex-start   | flex-end | center |           space-between           |          space-around;
    在主轴方向上的对齐方式：左对齐         右对齐       居中      两端对齐（每个项目所占长度相等）项目之间的间距相等
        align-items：                  flex-start | flex-end | center |                baseline                      | stretch;
    垂直方向上的对齐方式：     起点           终点         中点     沿着容器内的第一行文字对齐     所有项目撑满整个屏幕
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    规定一组容器在最外层容器里的对齐方式
子元素的属性：
    order：<Integer> 定义项目的排列顺序。数值越小，排列越靠前，默认为0 (有负值)    
    flex-grow：<number> 放大比例（若所有项目值均为1，则他们均分容器距离，若有一个为2，则它所占的大小为其他的两倍）
    flex-shrink：<number> 缩小比例（若所有项目值均为1，当容器大小不够时，他们等比例缩小，若有一个为0，则它不缩小，不支持负值）
    flex-basis：flex-basis: <length> | auto; 自定义占据空间大小，同width，height
    flex：0 [1 auto]是flex-grow,flex-shrink,flex-basis的缩写(建议)
    align-self: auto | flex-start | flex-end | center | baseline | stretch;允许单个项目有与其他项目不一样的对齐方式
        继承父级                                                         无父级