CSS justify-content:center的使用详解

CSS中的justify-content:center是一个非常强大的属性，它可以将元素（一般是flex容器内的子元素）在水平轴居中对齐。条理清晰、代码简单明了是最应该被追求的，今天我将详细讲解CSS中的justify-content:center的用法。

基础用法

首先让我们来看一下基础的用法，如下所示：

<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

.container{
    display:flex;
    justify-content:center;
}
.content{
    width:150px;
    height:150px;
    background-color:#ccc;
    margin:10px;
}

上面的代码将flex容器内的所有子元素在水平中心对齐。justify-content:center属性会将子元素沿着主轴居中排列，此处的主轴指的是flex容器的方向。在这种情况下，我们使用了display:flex将容器设置为flex布局，并且将justify-content:center属性应用于容器元素。

align-items和margin的关系

下面我们来看一下容器内子元素的垂直居中对齐。我们可以使用align-items:center属性完成垂直居中对齐。

<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

.container{
    display:flex;
    justify-content:center;
    align-items:center; /* 垂直居中 */
}
.content{
    width:150px;
    height:150px;
    background-color:#ccc;
    margin:10px;
}

虽然此时子元素已经垂直居中，但是子元素之间的间隔可能并不符合我们的需求。我们可以使用margin属性来改变子元素之间的间隔。

<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

.container{
    display:flex;
    justify-content:center;
    align-items:center; /* 垂直居中 */
}
.content{
    width:150px;
    height:150px;
    background-color:#ccc;
    margin:0 10px; /* 左右间隔10px */
}

在这段代码中，我们将margin属性应用于子元素。这将会使每个子元素之间保持10px的间隔。

flex-wrap

有时候我们会有一个大容器，里面包含了很多小容器，而我们又希望小容器能够在一行内展示。这时我们可以使用flex-wrap的属性来控制折行。

<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

.container{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap; /* 折行 */
}
.content{
    width:150px;
    height:150px;
    background-color:#ccc;
    margin:0 10px 10px 0;
}

在这段代码中，我们将flex-wrap属性设置为wrap，从而使小容器能够水平展示。如果一行不够放下所有小容器，我们可以将剩余的小容器自动折行到下一行。

justify-content:space-between

当我们希望在水平方向上使元素之间的间距相等时，我们可以使用justify-content:space-between属性。

<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

.container{
    display:flex;
    justify-content:space-between; /* 元素间距相等 */
}
.content{
    width:150px;
    height:150px;
    background-color:#ccc;
}

此时，三个子元素会在flex容器内均匀排列，并且元素之间的间距相等。

justify-content:space-around

当我们希望在水平方向上使元素之间的间距相等，并且元素与容器的距离相等时，我们可以使用justify-content:space-around属性。

<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

.container{
    display:flex;
    justify-content:space-around; /* 元素间距相等，与容器距离也相等 */
}
.content{
    width:150px;
    height:150px;
    background-color:#ccc;
}

此时，三个子元素会在flex容器内均匀排列，并且元素之间的间距相等，元素与容器的距离也相等。

justify-content:space-evenly

当我们希望在水平方向上使元素之间的间距相等，并且元素与容器两端的距离相等时，我们可以使用justify-content:space-evenly属性。

<div class="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

.container{
    display:flex;
    justify-content:space-evenly; /* 元素间距相等，与容器两端距离也相等 */
}
.content{
    width:150px;
    height:150px;
    background-color:#ccc;
}

此时，三个子元素会在flex容器内均匀排列，并且元素之间的间距相等，元素与容器两端的距离也相等。

结论

综上所述，CSS中的justify-content:center是flex布局中非常有用的属性。我们可以使用它在水平方向上居中对齐元素，并且通过其他属性（如flex-wrap、align-items、margin、space-between、space-around和space-evenly）进一步控制布局，以获得我们想要的效果。