CSS3弹性盒基本布局方式 display: flex

当你的才华还不足以支撑你的野心时，就应该静下心来去学习！

      

弹性盒子常用属性：display: flex；开启弹性盒模式
    --1、flex-direction 方向 ：纵向 竖向  主轴和侧轴
        -row 从左往右排列
        -row-reverse 从右往左排列
        -column 从上往下排列
        -column-reverse 从下往上排列

    --2、flex-wrap      是否换行
        -nowrap 默认值的 不换行
        -wrap   向下或者向右换行
        -wrap-reverse 向上或者向左换行
【方向和换行的简写属性】
 flex-flow: row wrap;
    --3、flex-grow/shrink 放大与缩小
        -数值型：表示比例系数
        放大时：值越大，分匹配的长度越大 默认值为0
        缩小时：值越大，缩小的越厉害 默认值为1

   --4、主轴如何留白：
      justify-content  水平方向如何留白
        -flex-start     左对齐
        -flex-end       右对齐
        -center         主轴方向，水平居中
        -space-between： 两端对齐
        -space-evenly   平均分配在元素之间（相邻位置不会叠加）
        -space-around   分配元素周围，（元素的相邻位置会叠加）

     --5、侧轴如何留白
        如果子元素不设置宽高，那么默认拉伸最大化，如果设置宽高，那么拉伸属性失效
        align-content:【*】把每一行看做成一个元素 在父元素角度上，摆放每个元素，【父元素垂直方向如何留白】
            -属性和justify-content一样，更加灵活
            -相比align-items， align-content的对齐方式更多，更灵活
            -align-content 常用来对多行操作，可以完全替代 align-items
            -align-items    常用来对单行操作
            -stretch        拉伸，在行内高度最大化
        align-items:【*】把每一行看做成一个元素 设置该元素内部内容的垂直方向的对齐方式 【每一行垂直方向如何留白】
            -flex-start 在行内上对其 (默认值)
            -center     居中
            -flex-end   在行内下对齐
            -baseline   基线对齐  （不常用）

        align-self：对行内的某个子元素 单独设置对齐方式  （更体现出灵活性）
            -flex-start 在行内上对其
            -center     居中
            -flex-end   下对齐      

=================================结尾=============================

自己刚学完弹性盒的基本知识点，整理和总结的笔记。