4、flex布局容器六⼤属性之justify-content

justify-content

justify-content属性设置⼦项⽬在主轴上的对⻬⽅式。

值	描述	示例
flex-start	默认值。左对⻬	1
flex-end	右对⻬	2
center	居中	3
space-between	两端对⻬，⼦项⽬之间间隔⼀样	4
space-around	每个⼦项⽬两侧的间隔⼀样	5

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content</title>
</head>
<style>
    .flexTest {
        display: flex;
        width: 100wh;
        border: 1px solid red;
        /* 默认值。左对⻬ */
        justify-content:flex-start;
        /* 右对⻬ */
        justify-content:flex-end;
        /* 居中 */
        justify-content:center;
        /* 两端对⻬，⼦项⽬之间间隔⼀样 */
        justify-content:space-between;
        /* 每个⼦项⽬两侧的间隔⼀样 */
        justify-content:space-around;
    }

    .item {
        width: 100px;
        height: 100px;
        background-color: gray;
        margin: 10px;
        text-align: center;
        line-height: 100px;
    }
</style>

<body>
    <h1>justify-content</h1>
    <div class="flexTest">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

</html>