Flex布局-移动端

1.1Flex布局:

特点: 父元素(亲爹)添加display: flex，子元素可以自动的挤压或拉伸

布局网页更简单、灵活

避免浮动脱标的问题

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

1.2主轴对齐方式:justify-content

flex:默认值,起点开始排列

flex-end:终点开始依次排列

center:沿主轴居中排列

space-around:弹性盒子沿主轴均匀排列,空白间距均分两侧

space-between:弹性盒子沿主轴均匀排列,空白间距均分在相邻盒子之间

space-evenly:弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等

display: flex;
            /* 居中 */
            justify-content: center;
            /* 均分间距,平分剩余的间距 */
            /* 出现在子级之间 */
            justify-content: space-between;
            /* 间距出现在子级的两侧 */
            /* 子级之间的间距是距离父级的两倍 */
            justify-content: space-around;
            /* 各个地方的间距都一样 */
            justify-content: space-evenly;

1.3侧轴对齐方式:使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器）

align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

1.4圣杯布局:

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            display: flex;
            width: 100%;
            height: 40px;
            background-color: pink;
            text-align: center;
            line-height: 40px;
        }
        .box div:nth-child(1),
        .box div:nth-child(3){
            width: 40px;
            height: 40px;
            background-color: green;
        }
        .box div:nth-child(2) {
            flex: 1;
        }