Flex布局

1.Flex布局极大的提高了我们布局的效率，更简单、灵活,flex布局元素没有了分类,可以直接给宽高,也不会脱离标准流.(给父元素添加 display: flex )

2.Flex布局主轴对齐方式(默认为X轴)

            /* 盒子1:2平分父亲的宽度 */
            /* justify-content: space-around; */
            /* 盒子居中 */
            /* justify-content: center; */
            /* 盒子1:1平分父亲的宽度 */
            /* justify-content: space-evenly; */
            /* 左右盒子贴边 */
            /* justify-content: space-between; */

3.Flex布局侧轴对齐方式(默认为Y轴)

4.Flex布局中的伸缩比(flex:1)

给子盒子加,比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。

 

 5.Flex布局中的圣杯布局

①两侧盒子写固定大小,②中间盒子 flex: 1; 占满剩余空间