flex布局

1、flex布局（弹性布局）

1.1特点

浏览器提倡的布局模型；避免浮动脱标的问题；

1.2构成

设置方式：父元素添加 display:flex;
组成部分：弹性容器（父元素），弹性盒子，主轴（X），侧轴/交叉轴（Y）

1、主轴对齐方式 justify_content:start/end/center/space_around/space-between/space-evenly（起、中、终、space-）

.box{
            /* 给父元素添加flex，让多个元素一行排列 */
            display: flex;
            /*1. justify-content默认起点到指点 */
            justify-content: start;
            /* 2.从站点依次排列 */
            justify-content: end;
            /* 3.沿主轴居中 */
            justify-content: center;
            /* 4.间距均分盒子两测 */
            justify-content: space-around;
            /* 4.第一次和最后一个两侧排列，中间均分 */
            justify-content: space-between;
            /* 5.所有间距均分 */
            justify-content: space-evenly;
            /* 默认主轴方向是从左到右 */
            /* 多个块级元素默认顶端对齐 */
            /* 内部弹性盒子不会脱标，父元素能够正常检测，且弹性容器的宽度依旧是父级的百分百 */
        }

2、侧轴对齐方式align-items:stretch(默认)、上、中、下；
单个align-self(值相同)

   .box {
            display: flex;
            /* 侧轴对齐方式align-items */
            /* 1、默认值strerch 拉伸：如果弹性盒子没有高度，默认铺满父容器高度 */
            align-items: stretch;
            /* 2、从起点开始 */
            align-items: flex-start;
            /* 3、从终点开始 */
            align-items: flex-end;
            /* 4、沿侧轴居中排列 */
            align-items: center;

        }

3、注意点
行内元素变成弹性盒子后，自身没有高度时，铺满父容器高度；可以直接设置大小；
把行内元素变成弹性容器时，可以直接设置大小；
4、伸缩比 flex:整数；（只占用父盒子剩余尺寸的分数）
flex伸缩比常用布局格式：左中右格式，中间占剩余

 .box{
            display: flex;
            justify-content: space-between;
            width: 500px;
            height: 200px;
            margin: 100px auto;
            background-color: aqua;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .son3{
            width: 100px;
            height: 200px;
            background-color: #556;
        }
        .son2{
            flex: 1;
            background-color: blue;
        }

5、改变主轴对齐方向 flex-direction: column

 display: flex;
            /* 1、默认值，不用加 */
            flex-direction: row;
            /* 2、水平主轴翻转  不常用*/
            flex-direction: row-reverse;
            /* 3、把主轴改为从上到下 */
            flex-direction: column;
            justify-content: space-between;
            /* 4、翻转从下到上  不常用*/
            flex-direction: column-reverse;

6、用flex实现多个盒子排列

flex-wrap: wrap; 
/* 换行后多了一个行与行的概论,可以使用align-content:去控制 */
align-content: flex-start;

7、flex实现盒子水平居中，里面内容列(ul>li*5)
加了flex后会脱标，记得加宽
ul{1、display:flex；2、justify-content:space-between; 3、align-items:center}