flex布局

flex布局

开启flex布局：flex-container   ==》子元素flex-items
             display:flex(块级元素) / inline-flex(行内元素)

应用在flex container（父类）

flex-direction决定主轴方向

1、flex-direction: 决定主轴的方向
    row: 主轴横向往右排列（默认值）  1 2 3
    row-reverse: 主轴横向从右到左反向排列   3 2 1
    column: 垂直方向排列，从上到下    
    column-reverse: 垂直方向排列，从下到上      
2、justify-content: 决定flex items在主轴上的对齐方式
    flex-start: 从主轴开始的位置对齐（默认）
    flex-end: 从主轴结束的位置对齐
    center: 居中对齐
    space-between: 两端对齐，中间间隔宽度相等
    space-evenly: 均匀居中，两端和两侧之间的距离相等
    space-around: 中间间隔相等，两端的距离是中间间隔的一半  
3、align-items: 决定了flex items在交叉轴上的对齐方式
    normal: 效果和stretch一样(前提是没有给items设置高度)
    stretch: 当flex items在交叉轴方向的size为auto时，会自动拉伸至
         填充flex container
    flex-start: 与交叉轴开始的位置对齐
    flex-end: 与交叉轴结束的位置对齐
    center: 与交叉轴的中心点居中对齐
    baseline: 基线对齐，第一行文本对齐
4、align-content: 决定了多行flex items在交叉轴上的对齐方式，用法与
       justify-content类似
    stretch: 与align-items中的stretch作用类似，用于拉升，前提没有设置高度(默认)
    flex-start: 从交叉轴开始的位置排列
    flex-end: 从交叉轴结束的位置排列
    center: 从交叉轴的中心点排列
    space-between: 上下两端对齐，中间间隔宽度相等
    space-evenly: 均匀居中，上下，两侧，中间间隔都相等
    space-around: 上下两端之间的距离是中间间隔的一半
5、flex-wrap: 决定flex container是单行还是多行
    nowrap: 单行（默认）
    wrap: 多行，第一行在交叉轴的开始
    wrap-reverse: 多行，反转，第一行在交叉轴的结束
6、flex-flow: 是flex-direction || flex-wrap的简写
    justify-content: space-evenly;
    flex-flow: row-reverse wrap;

应用在flex items（子类）

1、order: 决定flex items的排布顺序
     可以设置任意整数(正，负，0)，值越小就越排在前面
     默认值为 0
2、align-self: 可以覆盖flex container设置的align-items
     auto: 遵从flex container的align-items设置(默认)
     stretch，flex-start，flex-end，center，baseline，效果和align-items一样
3、flex: 是flex-grow || flex-shrink || flex-basis的简写
     单值语法：其中之一
          无单位数(number): 会被当做flex-grow的值
          有效的宽度值(width): 会被当做flex-basis的值
          关键字none，auto，initial   
        flex: 1; / flex: 100px; / flex:none;   
     双值语法：
          无单位数: 会被当做flex-shrink的值
          有效的宽度值: 会被当做flex-basis的值
     三值语法：
          无单位数: 会被当做flex-grow的值
          无单位数: 会被当做flex-shrink的值
          有效的宽度值: 会被当做flex-basis的值                   
4、flex-grow: 决定flex items如何扩展
     可以设置任意非负数字，默认值为 0
     最终的size不能超过max-width / max-height
5、flex-shrink: 决定flex items如何收缩
     可以设置任意非负数字，默认值为 1
     最终的size不能小于min-width / min-height
6、flex-basis: 用来设置flex items在主轴方向上的大小
     auto(默认值) / 具体的宽度数值
     优先级(高到低): max-width/height / min-width/height
                    flex-basis
                    width/height
                    内容本身的size