1. 首页
  2. CSS 菜鸟教程
  3. CSS Flexbox - justify-content 属性

CSS Flexbox - justify-content 属性

CSS justify-content 属性确定沿 flex 容器的主轴或网格容器的内联轴的内容项之间的对齐和空间分配。

可能的值

  • start - 这些物品紧密地放置在容器的起始边缘。
  • end − 从容器的末端开始，物品紧密地放置在一起。
  • center - 物品从容器的中心紧密地放置在一起。
  • flex-start − 在 flex 容器的开头对齐 flex 项。这仅适用于 flex 布局项目。
  • flex-end − 将 flex 项对齐在 flex 容器的末端。这仅适用于 flex 布局项目
  • left  − 将 flex 项对齐到 flex 容器主轴的左侧。当 flex-direction: column；当属性的水平轴不平行于内联轴时，此值的功能类似于 start。
  • right  − 将柔性项目对齐到柔性容器主轴的右侧。当属性的轴不平行于内联轴（在网格容器中）或主轴（在 flexbox 容器中）时，此值的功能类似于 start。
  • normal - 这表现为拉伸，但在具有指定列宽的多列容器中，列保持其宽度，而不是拉伸以填充容器。
  • space-between - 它沿柔性容器的主轴在柔性物品之间均匀分配空间。每对相邻元素都具有相同的间距。第一项和最后一项分别与主起始边沿和主端边齐平。
  • space-around - 它沿 flex 容器的主轴均匀地分布在 flex items 周围的空间。每对相邻元素都具有相同的间距。第一个项目之前和最后一个项目之后的间距等于每对相邻项目之间空间的一半。
  • space-evenly  - 它沿柔性容器的主轴均匀分布柔性物品周围和之间的空间。相邻项具有相同的间距，即 main-start 和第一项，以及 main-end 和最后一项。
  • stretch − 如果沿主轴的项目总大小小于对齐容器，则自动调整大小的项目将相等地增加其大小以填充容器，同时遵守最大高度/最大宽度约束。

适用于

Flex 容器

语法

位置对准


justify-content: start;
justify-content: end;	
justify-content: center;	
justify-content: flex-start;	
justify-content: flex-end;	
justify-content: left;	
justify-content: right;

正常对齐


justify-content: normal;

分布式对齐


justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;	
justify-content: stretch;

CSS justify-content - 开始值

以下示例演示了属性 justify-content： start，将 flex 项对齐到 flex 容器的开头 -


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

CSS justify-content - 最终值

以下示例演示了属性 justify-content： end 将 flex 项对齐在 flex 容器的末尾 -


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

CSS justify-content - 中心值

以下示例演示了属性 justify-content： center 将 flex 项对齐在 flex 容器的中心 -


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

CSS justify-content - 弹性启动值

以下示例演示了属性 justify-content： flex-start 将 flex 项对齐 flex 容器的开头 -


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

CSS justify-content - 弹性端值

以下示例演示了属性 justify-content： flex-end 将 flex 项对齐在 flex 容器的末尾 -


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

CSS justify-content - 左值

以下示例演示了属性 justify-content： left 将 flex 项对齐到 flex 容器主轴的左侧 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 justify-content: left;
	 	 	 background-color: green;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	 	 width: 75px;
	 	 	 height: 50px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	</div>
</body>
</html>

CSS justify-content - 正确的值

以下示例演示了属性 justify-content： right 将 flex 项对齐到 flex 容器的主轴的右侧 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 justify-content: right;
	 	 	 background-color: green;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	 	 width: 75px;
	 	 	 height: 50px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	</div>
</body>
</html>

CSS justify-content - 值之间的空格

以下示例演示了属性 justify-content： space-between 沿 flex 容器的主轴在 flex 项之间均匀分配空间 -


<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>
</body>
</html>

CSS justify-content - 空格值

以下示例演示了属性 justify-content： space-around 沿 flex 容器的主轴均匀分布 flex 项周围的空间 -


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

CSS justify-content - space-evenly 值

以下示例演示了属性 justify-content： space-evenly 均匀地沿 flex 容器的主轴在 flex 项周围和之间分配空间 -


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

CSS justify-content - 拉伸值

以下示例演示了属性 justify-content： stretch 沿 flex 容器的主轴拉伸 flex 项 -


<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 background-color: green;
	 	 	 height: 350px;
	 	 	 flex-wrap: wrap;
	 	 	 justify-content: stretch;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	 	 width: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div>Flex item 1</div>
	 	 	 <div>Flex item 2</div>
	 	 	 <div>Flex item 3</div>
	 	</div>
</body>
</html>

 

<< CSS - inset-inline-start 属性 CSS - @keyframes 属性 >>