CSS - justify-content 属性

CSS 的justify-content属性用于确定弹性容器的主轴或网格容器的内联轴上内容项的对齐方式和空间分配。对于弹性容器，主轴的方向由flex-direction确定，垂直于主轴的方向是交叉轴。

语法

位置对齐

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;

属性值

值	描述
flex-start	项目位于容器的起始位置。默认值。
flex-end	项目位于容器的结束位置。
center	项目位于容器的中心位置。
space-between	容器中的项目之间有间隔。
space-around	容器中的项目在其之前、之间和之后都有间隔。
space-evenly	容器中的项目在其周围有相等的空间。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS Justify Content 属性示例

以下示例说明了使用不同值的justify-content属性。

使用 Flex Start 值的 Justify Content 属性

为了将项目沿主轴放置在弹性容器的起始位置，我们使用flex-start值。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: flex-start;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: flex-start; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Flex End 值的 Justify Content 属性

为了将项目沿主轴放置在弹性容器的结束位置，我们使用flex-end值。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: flex-end;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: flex-end; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Center 值的 Justify Content 属性

为了将项目沿主轴放置在弹性容器的中心位置，我们使用center值。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: center;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: center; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Space Between 值的 Justify Content 属性

为了将弹性容器中的项目沿主轴放置，使它们之间有间隔，我们使用space-between值。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-between; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Space Around 值的 Justify Content 属性

为了将弹性容器中的项目沿主轴放置，使它们在其之前、之后和之间都有间隔，我们使用space-around值。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-around;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-around; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Space Evenly 值的 Justify Content 属性

为了将弹性容器中的项目沿主轴放置，使它们在其周围有相等的空间分布，我们使用space-evenly值。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-evenly;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-evenly; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用网格布局的 Justify Content 属性

justify-content属性也可以与网格布局一起使用，以沿内联方向对齐项目。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         justify-content: center;
         gap: 10px;
         border: 2px solid black;
         height: 300px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 30px;
         width: 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: center; display:grid
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
justify-content	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

打印页面