flex布局

flex布局

老版本flex布局

容器的布局排列方向

-webkit-box-direction：控制主轴方向

-webkit-box-orient ：属性本质上确定了主轴和侧轴分别是哪一根 ；:horizontal x 轴 ：vertical y 轴

富裕空间的管理

-webkit-box-pack:

主轴富裕空间：

• start: 富裕空间在右边（x） 下边（y）
• end: 富裕空间在左边 (x) 上边(y)
• center: 富裕空间在两边
• justify: 富裕空间在项目之间

侧轴富裕空间：

• start: 富裕空间在右边（x） 下边（y）
• end: 富裕空间在左边 (x) 上边(y)
• center 富裕空间在两边

弹性管理空间

是将主轴上的富裕空间按比例分配到项目的width/height上

新版本flex布局

flex-wrap：属性控制了容器为单行/列 还是多行/列。并且定义了侧轴的方向。新行/列将沿侧轴方向堆砌。

默认值：nowrap 不可继承

值：nowrap | wrap | wrap-reverse

flex-flow：属性是设置 flex-direction 和 flex-wrap 的简写

默认值：row nowrap 不可继承； 控制主轴和侧轴的位置及方向

align-content：属性定义弹性容器的侧轴方向上有额外空间时，如果排布每一行/列。当弹性容器只有一行/列时无作用

默认值：stretch 不可继承

值：

• flex-start：所有行/列从侧轴起点开始填充。第一行/列的侧轴起点和容器的侧轴起点边对齐。接下来的每一行/列紧跟前一行/列。主轴：富裕空间在主轴的正方向 ；侧轴：富裕空间在主轴的正方向
• flex-end：所有弹性元素从侧轴莫为开始填充。最后一个弹性元素的侧轴终点和容器的侧轴终点对齐。同时所有后续原素与前一个对齐。主轴：富裕空间在主轴的反方向 ；侧轴：富裕空间在主轴的反方向
• center：所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐。容器的侧轴期待那边和第一行/列的距离相等于容器的侧轴终点和最后一行/列的距离。主、侧轴：富裕空间在两边
• space-between：所有行/列在容器中平均分布。相邻两行/列间距相等。容器的侧轴起点和终点边分别与第一行/列和最后一行/列的边对齐。主轴： 富裕空间在项目之间
• space-around：所有行/列在容器中平均分布，相邻两行/列间距相等。容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的距离是相邻两行/列间距的一半。 主轴：富裕空间在项目两边
• stretch：拉伸所有行/列来填满剩余空间。剩余空间平均的分配给每一行/列。侧轴： 等高布局

示例代码：
<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #wrap {
            width: 400px;
            height: 300px;
            border: 1px solid;
            margin: 100px auto;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            /* 单行单列 */
            align-items: flex-start;
            /*
             控制侧轴的方向
            */
            flex-wrap: wrap;
            /*  控制多行多列时，富裕空间的管理  会把所有行、列看成一个整体*/
            align-content: flex-end;
        }
        
        #wrap>.item {
            width: 50px;
            height: 50px;
            background: pink;
            text-align: center;
            line-height: 50px;
        }
    </style>
     <div id="wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

flex-grow：

规则：可用空间 =（容器大小-所有相邻项目flex-basis的总和）

​ 400-5*50=150 (当没有定义flex-base时)

​ 400-5*0=400 （当定义flex-base时）

​ 可扩展空间=（可用空间/所有相邻项目flex-grow的总和）

​ 150/8=18.75 当没有定义flex-base时

​ 400/8=50 当定义flex-base时

​ 每项伸缩大小=（伸缩基准值+（可扩展空间*flex-grow值））

​ 50+18.75*4=125 当没有定义flex-base时

​ 50+18.75*1=68.75

​ 0+50*4=200 当定义flex-base时

​ 0+50=50

flex-shrink:收缩因子 默认值为1 前提 flex-wrap:nowrap

每项 flex 收缩大小=伸展基准值-（收缩比例/收缩比例总和*溢出的空间）[(益处空间/收缩比例总和之后再乘以比例)]

1.计算收缩因子与基准值乘的总和

2.计算收缩因数

​ 收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和

3.移除空间的计算

​ 移除空间=项目收缩因数*负益处的空间

代码示例：
  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #wrap {
            width: 400px;
            height: 300px;
            border: 1px solid;
            margin: 100px auto;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }
        #wrap>.item {
            width: 50px;
            height: 50px;
            background: pink;
            text-align: center;
            line-height: 50px;
            flex-grow: 1;
        }
        
        #wrap>.item:nth-child(1) {
            flex-grow: 4;
        }
    </style>
      <div id="wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>