Flex 弹性布局

父级元素:

display:flex;
添加浏览器前缀: -webkit- 一般不用写 ,真实工作可以用postCss插件自动生成
display:-webkit-box;
如果用了弹性布局，子元素，不需要浮动 float

注意： 需要先设置父元素的排列方向

默认水平排列 可以不写
flex-direction: row;
垂直正常顺序排列
flex-direction: column;

先设置子元素的盒子模型

box-sizing: content-box;  默认 padding, border 盒子会变大，向外扩展
一般设置成
`box-sizing: border-box;   padding, border 盒子不变大，向内扩展`

父级元素身上的属性:justify-content 水平(从左到右)排列

 /*父级元素*/
        .box{
            width:500px;
            height:500px;
            border: 1px solid #000;/*设置边框 颜色黑色*/
            margin: 20px; /*设置外边距*/
            display: flex; /*启用flex弹性布局*/
            /*父级身上的属性*/
             /*水平居中*/
            justify-content: center;
            /*两端对齐*/
            justify-content: space-between;
            /*子元素拉手分布*/
            justify-content: space-around;
            /*水平居左*/
            justify-content: flex-start;
            /*水平居右*/
            justify-content: flex-end;
        }

父级元素身上的属性:align-items 垂直(自上而下)排列

/*父级元素*/
        .box{
            width:500px;
            height:500px;
            border: 1px solid #000;/*设置边框 颜色黑色*/
            margin: 20px; /*设置外边距*/
            display: flex; /*启用flex弹性布局*/
            /*父级元素身上的属性*/
             /*垂直居中*/
            align-items: center;
            /*垂直居底*/
            align-items: flex-end;
            /*垂直居上*/
            align-items: flex-start;
        }

父级元素身上的属性:flex-direction 翻转(对调子元素的顺序)排列

/*父级元素*/
        .box{
            width:500px;
            height:500px;
            border: 1px solid #000;/*设置边框 颜色黑色*/
            margin: 20px; /*设置外边距*/
            display: flex; /*启用flex弹性布局*/
            /*父级元素身上的属性*/
             /*排列方向*/
            /*默认水平排列*/
            flex-direction: row;
            /*水平翻转子元素顺序排列*/
            flex-direction: row-reverse;
            /*垂直正常顺序排列*/
            flex-direction: column;
            /*垂直翻转子元素顺序排列*/
            flex-direction: column-reverse;

        }

父级元素身上的属性:flex-wrap 子元素一行显示是否换行

/*父级元素*/
        .box{
            width:500px;
            height:500px;
            border: 1px solid #000;/*设置边框 颜色黑色*/
            margin: 20px; /*设置外边距*/
            display: flex; /*启用flex弹性布局*/
            /*父级元素身上的属性*/
          /*子元素一行显示是否换行*/
            /*默认是-不换行*/
            flex-wrap: nowrap;
            /*换行*/
            flex-wrap: wrap;
        }

父级元素身上的属性:align-content 多行的时候，排列方式 默认是stretch 拉伸

/*父级元素*/
        .box{
            width:500px;
            height:500px;
            border: 1px solid #000;/*设置边框 颜色黑色*/
            margin: 20px; /*设置外边距*/
            display: flex; /*启用flex弹性布局*/
            /*父级元素身上的属性*/
          /*多行的时候，排列方式 默认是stretch 拉伸*/
            align-content:stretch;
            /*垂直居中*/
            align-content: center;
            /*!*垂直居底*!*/
            align-content: flex-end;
            /*!*垂直居上*!*/
            align-content: flex-start;
        }

子级身上属性:flex flex表示所占的系数

flex表示所占的系数，比如当前是2个div子元素，总共是4份(div的flex数+div1的flex数)，div是占1份 而div1占3份

        /*子级*/
        .div{
            /*flex表示所占的系数，比如当前是2个div子元素，总共是4份(div的flex数+div1的flex数)，div是占1份 而div1占3份*/
            flex:1; /*设置之后宽或者高会失效 根据排列方向有关*/
            /*width:100px;*/
            /*height:100px;*/
            background: red;
            font-size: 40px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            /*margin: 20px; !*外边距没有颜色*!*/
            border: 1px solid #6546ff;
        }

子级身上属性:flex-grow 定义子元素放大比例

flex-grow: 1; 默认是0

        /*子级*/
        .div{
             /*将子元素在一行内填充满*/
            flex-grow: 1; 
            /*width:100px;*/
            /*height:100px;*/
            background: red;
            font-size: 40px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            /*margin: 20px; !*外边距没有颜色*!*/
            border: 1px solid #6546ff;
        }

子元素的不常用的属性

    flex:1      1 指的是一个系数   √* 子元素在划分父元素宽度，先刨除固定宽度

    align-self:flex-start; 其实就是用来覆盖父级 align-items  垂直排列
        
    flex-grow: 1;   定义子元素放大比例

    order:0 规定子元素顺序，排序
        数值越小，越靠前