移动Web之flex弹性布局

        flex布局极大提高了我们布局的效率、速度，是一种更加简单、灵活的布局方式。

flex布局的基本配置命令：

display: flex;
            /* 主轴对齐 快捷键jc */
            /* 从左到右,起点开始排列盒子 */
            justify-content: flex-start;
            /* 从右到左,终点开始排列盒子 */
            justify-content: flex-end;
            /* 盒子水平居中 重点 */
            justify-content: center;
            /*两边靠边,中间自适应  重点 */
            justify-content: space-between;
            /* 盒子自适应,按照1比2的比例平均分 */
            justify-content: space-around;
            /* 盒子自适应,盒子中间的距离1:1平均分 */
            justify-content: space-evenly;

 弹性盒子布局方式 侧轴对齐：

/* 侧轴对齐方式  快捷键ai */
            /* 从上往下排列盒子 */
            align-items: flex-start;
            /* 从下往上排列盒子 */
            align-items: flex-end;
            /* 垂直盒子居中 重点 */
            align-items: center;  
            /* 默认值  拉伸 */
            align-items: stretch;

flex伸缩比：

flex：x；x取值为正整数 表示容器内每个盒子占比的分数

flex；1；代表每个盒子占比一份，容器内盒子就会分成等比的大小

 也可以改变flex主轴的方向，flex主轴为row（x轴），可以通过flex-direction: column;改变主轴的方向（y轴）。

flex布局默认为不换行布局，当父盒子加了宽高后，无论有多少个子盒子，都会在一行排列。

flex-wrap: wrap;  弹性盒子换行排列

/* 多行侧轴盒子居中 */
            align-content: center;

            /* 多行盒子从上排列 */
            /* align-content: start; */

            /* 多行盒子从下排列 */
            /* align-content: flex-end; */

            /* 多行盒子侧轴靠边对齐 */
            /* accent-color: space-between; */

            /* 多行盒子侧轴1比2垂直对齐 */
            /* align-content: space-around; */

            /* 多行盒子侧轴1比1垂直对齐 */
            align-content: space-evenly;