弹性布局基础

学会了弹性布局就可以忘掉浮动啦，弹性布局不用担心盒子塌陷，如果没有兼容性的顾虑就可以大胆地用弹性布局啦。
 

 /* 弹性容器 */

            display: flex;

            /* 主轴居中 */

            justify-content: center;

            /* 侧轴居中 */

            align-items: center;

主轴对齐方式 ：

  /* 弹性容器 */

            display: flex;

            /* 主轴对齐方式： */

            /* 主轴让内容居中 */

            /* justify-content: center; */

            /* 让盒子的比例1:2平分 */

            /* justify-content: space-around; */

            /* 让盒子1:1平分父级的宽度 */

            /* justify-content: space-evenly; */

            /* 让盒子左右贴边(此时可以给盒子一个内边距，让盒子左右有一点点的距离,要给盒子设置box-sizing: border-box 否则盒子会被撑大;) */

            justify-content: space-between;

 侧轴对齐方式：

  /* 弹性容器 */

            display: flex;

            /* 侧轴默认左上角对齐 */

            /* align-items: flex-start; */

            /* 侧轴底部对齐 */

            /* align-items: flex-end; */

            /* 重点：侧轴居中 */

            align-items: center;

            /* 侧轴拉伸，如果子盒子没设置高度的话，默认就是拉伸 */

            /* align-items: stretch; */

            justify-content: space-between;

弹性伸缩比可以完成移动端最经典的圣杯布局：

  /* 弹性容器 */

            display: flex;

        

       

        .box>div {

            /* 伸缩比:flex 值取整数 给子盒子加 */

            flex: 3;

            background-color: orange;

        }

       

        .box>div:nth-child(2) {

            /* 把第二个盒子变成2等份，占的是父元素的两等份 */

            background-color: skyblue;

        }

  学到的越多，就感觉写网页越简单，加油咯