06.伸缩布局 flex

1.伸缩布局(t弹性布局)： 本质就是给盒子加buff，专治不服：百分比+浮动实现比较麻烦的需求
如何使用： 设置盒子display 为flex
2.伸缩布局三要素
子元素：住户
主轴：住户排列方式（默认水平）
次轴：阳台方向
/* 伸缩盒子(弹性布局) */
display: flex;
1.主轴方向：元素排列方式
主轴与次轴一定是垂直的，如果你把主轴方向变成垂直，次轴方向自动变成水平
注意点：
主轴： 如果子元素总宽度 > 伸缩盒子宽度，不会超出，flex盒子会自动合理按照比例分配宽度
次轴： 可以超出flex盒子

主轴:

   /* 默认：从左往右 */
        flex-direction: row;
        /* 从右往左 */
        /* flex-direction: row-reverse; */
        /* 从上往下 */
        /* flex-direction: column; */
        /* 从下往上 */
        /* flex-direction: column-reverse; */

2.主轴对齐方式

/* 默认：从左往右 */
            flex-direction: row;

            /* 2.主轴方向的对齐方式 */

            /* a.默认值： 左对齐 */
            justify-content: flex-start;
            /* b.右对齐 */
            justify-content: flex-end;
            
            /* c.居中对齐 */
            justify-content: center;
            /* d.两端对齐 */
            justify-content: space-between;
            /* e.间距相等： 中间的间距是边缘的两倍 */
            justify-content: space-around;
            

3.次轴方向的对齐方式

            /* a.默认值：高度平铺100%  子元素不能设置高度 */
            align-items: stretch;
            /* b.上对齐 */
            /* align-items: flex-start; */
            /* c.下对齐 */
            /* align-items: flex-end; */
            /* d.居中对齐 */
            /* align-items: center; */
            /* e.文字基线对齐 */
            /* align-items: baseline; */

4.主轴换行方式

/* 4.允许换行：只有子元素总宽度 > 父元素宽度 */

            /* 默认：不允许换行 */
            flex-wrap: nowrap;
            /* 允许换行 */
            flex-wrap: wrap;
            /* 反向换行： 倒着换行 */
            flex-wrap: wrap-reverse;

5.多行对齐方式

                a.这个属性只有多行的时候才有效（一行无效）
                b.默认换行之后，行之间会有默认间距，这个属性就是设置这个间距的
            */
            /* 上对齐 */
            align-content: flex-start;
            /* 下对齐 */
            align-content: flex-end;
            /* 居中对齐 */
            align-content: center;
            /* 两端对齐 */
            align-content: space-between;
            /* 间距相等 */
            align-content: space-around;
            /* 默认平铺 */
            align-content: stretch;

6.元素的 flex属性
!!!注意：设置了flex，设置宽度没用

     

        .box1{
            /* 1flex = 父元素宽度 / 子元素总flex
            注意：设置了flex，设置宽度没用
            */
            background-color: red;
            flex: 2;/* 子元素宽度比例：切蛋糕 */
        }

        .box2{
            background-color: green;
            flex: 1;
            width: 100px;/* 无效 */
        }

        .box3{
            background-color: hotpink;
            width: 100px;
        }