CSS - justify-content

描述

justify-content 属性用于控制弹性容器主轴上弹性项目的对齐方式。

它确定如何在弹性项目之间和周围分配额外的空间。

可能的值

flex-start
flex-end
center
space-between
space-around
space-evenly

应用于

所有 HTML 元素。

DOM 语法

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

内容对齐开始

flex-start 值沿主轴对齐弹性项目，将它们放置在容器的开头，项目之间或周围没有任何额外的空间 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: flex-start;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

内容对齐结束

当您将 justify-content 设置为 flex-end 时，弹性项目将对齐到弹性容器的末尾 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: flex-end;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

内容对齐居中

justify-content: center 属性，它沿主轴对齐弹性项目，在容器内水平居中 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: center;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

内容对齐间隔

justify-content: space-between 属性沿主轴均匀分布弹性项目，在相邻项目之间留出相等的空间，但在容器的边缘没有空间 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-between;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

内容对齐环绕

我们可以将 justify-content 属性设置为 space-around 值，该值沿主轴均匀分布弹性项目周围的空间，在相邻项目之间以及容器的边缘创建相等的间隙 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-around;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

内容对齐平均分布

justify-content: space-evenly 属性沿主轴均匀分布弹性项目之间的空间，包括外部边缘和项目之间的空间，从而导致所有项目之间的间距相等 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-evenly;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

打印页面