CSS justify-content 属性-之路教程

语法

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

justify-content 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .center {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: -webkit-flex;
        -webkit-justify-content: center;
        display: flex;
        justify-content: center;
      }
      .center div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content 属性示例</h2>
    <p>Here the "justify-content: center" is set:</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

带有“flex-start”值的 justify-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .start {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: -webkit-flex;
        -webkit-justify-content: flex-start;
        display: flex;
        justify-content: flex-start;
      }
      .start div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content 属性示例</h2>
    <p>Here the "justify-content: flex-start" is set:</p>
    <div class="start">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

带有“flex-end”值的 justify-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .end {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: -webkit-flex;
        -webkit-justify-content: flex-end;
        display: flex;
        justify-content: flex-end;
      }
      .end div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content 属性示例</h2>
    <p>Here the "justify-content: flex-end" is set:</p>
    <div class="end">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

带有“space-between”值的 justify-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .space-between {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        display: flex;
        justify-content: space-between;
      }

      .space-between div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content 属性示例</h2>
    <p>Here the "justify-content: space-between" is set:</p>
    <div class="space-between">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

带有“space-around”值的 justify-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .space-around {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: -webkit-flex;
        -webkit-justify-content: space-around;
        display: flex;
        justify-content: space-around;
      }
      .space-around div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content 属性示例</h2>
    <p>Here the "justify-content: space-around" is used:</p>
    <div class="space-around">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

CSS justify-content 属性

当项目（item）（item）未水平使用所有可用空间时， justify-content 属性会对齐项目（item）（item）。
它控制溢出行的项目（item）（item）的对齐方式。
此属性是弹性框布局模块的子属性。

justify-content 属性是 CSS3 属性之一。

justify-content 属性应该与设置为“flex”的 display 属性一起使用。

要垂直对齐项目（item）（item），请使用 align-items 属性。

初始值	flex-start
应用于	柔性容器。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.justifyContent =“Center”;

CSS justify-content 属性值说明

值	描述
flex-start	项目（item）（item）从容器的开头开始。
flex-end	物品放置在容器的末端。
center	物品放置在容器的中心。
space-around	在物品的线条之间和之后有空间。
space-between	物品线之间存在空间。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:36 来源：oir作者：oir

←CSS isolation属性

CSS justify-items 属性→

语法