Flex布局

Flex布局方式，Flex属性，响应式布局，PC和移动端布局，使用FLex进行简单的PC和移动端布局

基础知识点：main start 主轴开始位置 main end 主轴结束位置，cross start 交叉轴的开始位置 cross end 交叉轴的结束位置。main size 主轴大小 cross size 交叉轴大小。

Flex的使用规则：通过display:flex; 开启盒子弹性布局，盒子内所有元素（无论是块级元素还是行内元素都一样）布局默认在主轴上由main strat沿着main end 方向排布！

Flex Container 上的相关css属性

1.flex-flow(属性用于设置或检索弹性盒模型对象的子元素排列方式,缩写属性--》flex-direction||flex-warp)属性值：row-reverse warp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;/* 开启container盒子的Flex布局 */
           /* flex-flow:row nowrap 默认值*/
            flex-flow: row-reverse wrap;/* 弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行 */
        }
        .baby1{
            background: antiquewhite;
            height: 100px;
            width: 100px;
        }
        .baby2{
            background: aqua;
            height: 100px;
             width: 100px;
        }
        .baby3{
            background:coral;
            height: 100px;
             width: 100px;
        }
        .baby4{
            background: chartreuse;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
              <div class="baby1">baby1</div>
              <div class="baby2">baby2</div>
              <div class="baby3">baby3</div>
              <div class="baby4">baby4</div>
    </div>
</body>
</html>

2.flex-direction

 flex-direction: 
          row; 决定主轴方向，row为flex-direction的默认值，  默认方向主轴main start向main end！
          row-reverse;改变主轴方向由右方向左 
          column;改变主轴方向由上往下
          column-reverse;改变主轴方向由下往上

3.flex-warp

flex-warp：nowrap；默认情况下所有的flex-items都会在同一行显示
                                warp;当容不下时候就换行
                                wrap-reverse:多行反向

4. justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;/* 开启container盒子的Flex布局 */
            justify-content: space-around;
            /* flex strat ;默认在主轴方向开始位置对齐 决定主轴的对齐方式
               flex  end;主轴结束位置对齐
               center;居中对齐
               space-between;间距相等对齐，不含两边
               space-evenly;均分间距对齐，包括两边，IE占不支持
               space-around;中间间距为两边间距的两倍等分对齐 */
        }
        .baby1{
            background: antiquewhite;
            height: 100px;
            width: 100px;
        }
        .baby2{
            background: aqua;
            height: 100px;
             width: 100px;
        }
        .baby3{
            background:coral;
            height: 100px;
             width: 100px;
        }
        .baby4{
            background: chartreuse;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
              <div class="baby1">baby1</div>
              <div class="baby2">baby2</div>
              <div class="baby3">baby3</div>
              <div class="baby4">baby4</div>
    </div>
</body>
</html>

5.algin-items

algin-items：normal 在子元素没有设置高度时，默认normal在交叉轴上拉伸

6.align-content

 align-content:stretch;默认值  决定多行在交叉轴上的对齐方式
               flex-strat:在交叉轴上依次排列
               space-evenly:在交叉轴上等距离均分

flex items上的相关css属性

1. flex

flex是flex-grow||flex-grow||flex-shrink||flex-basis缩写，可以指定1,2,3个值

2.flex-grow

 flex-grow的总和(sum)加起来大于一，每个flex item扩展的size为flex container的剩余size*flex-grow/sum
                         小于一，每个flex item扩展的size为flex container的剩余size*flex-grow
 flex items扩展后的最终size不能超过max-widthmax-height

3. flex-basis

决定主轴的上的宽度大小

决定flex item最终base size 的因素，从优先级由高到低

max-widthmax-widthmin-widthmin-height

flex-basis

widthheight

内容自身的size

4.flex-shrink

收缩；默认值为一，不能小于min-width/min-height

5.order

决定排布顺序,值越小排在越前面