8.弹性布局

##弹性布局

弹性盒模型 伸缩盒模型 flex box --默认子元素不换行

1.给父元素设置display:flex --是块级元素 

    *父元素没高度--高度不会塌陷  默认子元素 横向/水平排列

    *弹性布局是一维布局 主轴：默认水平   可以改变轴的方向 变成垂直方向

    *父元素有高度和子元素没有高度时，子元素会继承父元素高度

    *父元素和子元素都有高度时，听子元素高度

    *子元素width之和不超过父元素时，就是子元素的width 当之和超过父元素是，则进行压缩平分父元素width

2.给父元素设置display:inline-flex --是行内元素

        改变轴的方向 -默认为row

            flex-direction:row;    轴为水平方向

            flex-direction:row-reverse; 颠倒顺序 并且在轴的结束位置

            flex-direction:column;轴为垂直方向

        换行 -- flex-wrap

            flex-wrap:wrap; 换行 --变成多轴

            flex-wrap:wrap-reverse; 颠倒行的顺序

        flex-flow 是flex-direction 和flex-wrap的简写

                flex-flow:clum wrap; --改变轴方向为cloumn 和换行

3.主轴对齐

    justify-content: flex-start;

     justify-content: flex-end;

     justify-content: center;

     justify-content: space-between;    两端对齐

     justify-content: space-around; 环绕

4.交叉轴 -垂直方向

     align-items:flex-start;

      align-items:flex-end;

      align-items:center;   

      align-items:baseline;    文字基线对齐

  4.1单个子元素对齐方式

    align-self: flex-start;

    align-self: flex-end;

    align-self: center;

5.多轴对齐

         algin-content: stretch; --为默认

        algin-content: flex-start;    在开始位置

        algin-content: flex-end;    在结束位置

        algin-content: center;    在中间

        algin-content: space-between;    两端对齐

         algin-content: space-around; 环绕

6.order  排序 默认值是0 值越小越靠前

    order:0;

    order:1;

7.放大比列 flex--grow

         默认值是0 -不放大    

        不为0时 有剩余空间才放大

        flex--grow ：1 ；--占了剩余空间  放大子元素

        当多个子元素设置了 flex--grow ：1；就子元素平分剩余空间

8. 缩小比列     flex-shrink: --默认值1  --0 就是不缩小

         flex-shrink：0；

     当其中一个子元素设置了 flex-shrink：0；那么它就不缩小比列，其余子元素则缩小比例

9.flex-bassis 基准值

    flex-bassis：50px; 和设置宽度差不多