Flexbox 的 justify-content 属性详解及使用技巧-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox？

Flexbox 是一种新的布局模式，它可以让我们更轻松地实现复杂的布局。Flexbox 可以让我们通过简单的 CSS 属性来控制容器中的子元素的布局方式，从而实现更加灵活的布局效果。

什么是 justify-content 属性？

justify-content 属性是 Flexbox 布局中的一个属性，它用于定义容器中子元素的水平对齐方式。justify-content 属性可以有以下几个值：

flex-start：子元素向容器的起始位置对齐。
flex-end：子元素向容器的结束位置对齐。
center：子元素居中对齐。
space-between：子元素平均分布在容器中，两端不留空隙。
space-around：子元素平均分布在容器中，两端留有空隙。

使用技巧

将子元素居中对齐

如果我们想要将子元素居中对齐，可以使用 justify-content 属性，将其值设置为 center，如下所示：

.container {
  display: flex;
  justify-content: center;
}

将子元素分布在容器两端

如果我们想要将子元素分布在容器的两端，可以使用 justify-content 属性，将其值设置为 space-between，如下所示：

.container {
  display: flex;
  justify-content: space-between;
}

将子元素平均分布在容器中

如果我们想要将子元素平均分布在容器中，可以使用 justify-content 属性，将其值设置为 space-around，如下所示：

.container {
  display: flex;
  justify-content: space-around;
}

实例代码

下面是一个简单的实例代码，展示了如何使用 justify-content 属性来实现不同的布局效果：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flexbox Demo</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        height: 200px;
        background-color: #f0f0f0;
      }
      .box {
        width: 50px;
        height: 50px;
        background-color: #ff0000;
      }
      .box1 {
        background-color: #00ff00;
      }
      .box2 {
        background-color: #0000ff;
      }
      .box3 {
        background-color: #ffff00;
      }
      .box4 {
        background-color: #ff00ff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
    </div>
    <div class="container">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
    </div>
    <div class="container">
      <div class="box box1"></div>
      <div class="box box2"></div>
    </div>
    <div class="container">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
    </div>
  </body>
</html>

上面的代码中，我们定义了一个包含多个子元素的容器，通过设置不同的 justify-content 属性值，实现了不同的子元素布局效果。你可以通过修改属性值来尝试不同的布局效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d13b93a941bf713429c0b2

Flexbox 的 justify-content 属性详解及使用技巧