flex布局

在父级添加display: flex;

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px auto 0;
    }

    .father div {
        width: 100px;
        height: 100px;
        background-color: palevioletred;
    }

<div class="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

使用前

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px auto 0;
        display: flex;
    }

    .father div {
        width: 100px;
        height: 100px;
        background-color: palevioletred;
    }

<div class="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

主轴对其方式（在父级添加）

• justify-content: flex-start;

• justify-content: flex-end;

• justify-content: center;

• justify-content: space-around;

• justify-content: space-between;

• justify-content: space-evenly;

##侧轴对其方式（垂直方向）

• align-items:flex-start;（靠上对其，默认对其方式）
• align-items: flex-end;（靠下对其，默认对其方式）
• align-items: center;（居中对其，默认对其方式）（使用较多）

伸缩比（在子级添加flex:所占份数;）

圣杯布局

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father {
            width: 100%;
            height: 50px;
            background-color: paleturquoise;
            display: flex;
            margin-top: 100px;
        }

        div {
            font-size: 20px;
            line-height: 50px;
            text-align: center;
            color: white;
        }

        .father div:nth-child(2) {
            flex: 1;
        }

        .father div:nth-child(1),
        .father div:nth-child(3) {
            width: 100px;
            height: 50px;
            background-color: pink;
        }

<div class="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

使用用flex时，flex只会平分剩下的空间

修改主轴方向（flex-direction）

• flex-direction:row; 水平方向从左到右（默认）
• flex-direction:column; 垂直方向从上到下
• flex-direction:row-reverse; 水平方向从右到左
• flex-direction:column-reverse; 垂直方向从下到上

自动换行（flex-wrap: wrap;）

换行后对其方式（align-content，属性与justify-content相同）