布局（flex布局）

flex布局与grid布局的区别

• grid适用于大型布局，flex适用于小型布局

flex

1. 弹性盒模型：display:flex，排列方式根据主轴方向排列。子元素超出默认不换行，而是进行压缩

2. flex-direction 弹性盒模型主轴方向设置
   row（默认）---- 从左到右（侧轴：从上到下）
   row-reverse ---- 从右到左（侧轴：从上到下）
   column ---------- 从上到下（侧轴：从左到右）
   column-reverse 从下到上（侧轴：从左到右）

3. flex-wrap 子元素超出父级，换行问题
   nowrap (默认值) -----不换行
   wrap --------------------正常换行
   wrap-reverse ---------反向换行
   正常换行：按照侧轴方向换行。反向换行：按照侧轴反方向换行

4. flex-flow 主轴方向设置 换行方式（即以上两个的复合属性）

5. justify-content 主轴的对齐方式
   flex-start(默认值) 元素沿着主轴的开始方向进行排列，富裕空间保持在主轴方向的结束
   flex-end 元素排列在主轴方向的结束位置，富裕空间保持在主轴方向的开始位置
   center 元素排列在主轴中间，富裕空间平均分布在两侧
   space-between 子级平均分配在主轴上，富裕空间平均分派在子级之间
   space-around 富裕空间平均分配在子级的左右两边
   富裕空间：多出的部分的空间（content+padding+border+margin 之外的）

6. align-items 侧轴的对齐方式（一般默认不换行。所以侧轴算单个）
   stretch(默认值): 拉伸，撑满侧轴
   flex-start：侧轴上起点对齐
   flex-end：侧轴上终点对齐
   center：侧轴居中对齐
   baseline：基线对齐，根据侧轴文字基线进行对齐

7. align-content 侧轴对齐方式，针对多轴（有换行的那种）
   flex-start：排列在侧轴开始位置
   flex-end：排列在侧轴结束位置

8. 针对子级 order：n ，定义子级排列顺序，数值越小，越靠前

9. 针对子级伸缩性设置：
   如果父元素放不下子元素：会对全部子元素进行同比例压缩
   flex-basis ：px 初始值，大于width则会覆盖原width
   flex-grow：n 如果父级有富裕空间，会放大子元素。数字越大放大越多
   flex-shrink: n 父级空间不够，会压缩子元素。数字越大压缩越狠

 		#box div:nth-child(1) {
            /* flex: 1;  1*46*/
             flex: none; /* 不伸缩 */
        }
        #box div:nth-child(2) {
            flex: 2; /* 2*46*/
        }
        #box div:nth-child(3) {
            flex: 3;/* 3*46*/
        }
        #box div:nth-child(4) {
            flex: 4; /* 4*46*/
        }
        #box div:nth-child(5) {
            flex: 5;/* 5*46*/
        }
        flex计算：计算父级剩余空间（父级宽度-子元素的margin和）
        五个子元素margin：1px 父元素width：700  则剩余空间为790
        flex：none不伸缩，不加入计算
        则790/15=46 ，即每份flex宽度为46
        
针对子级伸缩性设置：如果父元素放不下子元素：会对全部子元素进行同比例压缩。
flex-grow：n 如果父级有富裕空间，会放大子元素。数字越大放大越多
flex-shrink: n 父级空间不够，会压缩子元素。数字越大压缩越狠  
flex-basis：px 初始值，大于width则会覆盖原width。

10. flex：复合属性。flex-grow flex-shrink flex-basis的复合属性

11. margin：auto auto ------- 子级上下auto会平分上下富裕空间，左右auto会平分左右富裕空间

12. 针对子级侧轴设置：align-self：
    stretch(默认值): 拉伸
    flex-start：侧轴上起点对齐
    flex-end：侧轴上终点对齐
    center：侧轴居中对齐
    baseline：基线对齐，根据侧轴文字基线进行对齐

老版本弹性盒模型

• box-orient：horizontal || vertical 水平还是垂直排列，类似flex-direction
• box-direction：normal || reverse 是否颠倒顺序，类似flex-direction：row-severse
• box-pack：start || end || center || justify 主轴方向对齐，类似justify-content
• box-align：start || center || end 交叉轴方向对齐，类似align-items

子元素自动换行

ul {     
    display: flex;
    width: 1090px;   //宽度必须设置，不然会挤压ul的同级元素
    flex-wrap: wrap; //flex子元素自动换行
}
li {
    width: 130px;
}

justify-content: space-between；没有两端对齐

去除伪元素，伪元素会影响排序