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: 将 Flex 项目与主项目的右侧对齐弹性容器的轴。当属性的轴与内联轴（在网格容器中）或主轴（在 Flexbox 容器中）不平行时，此值的功能类似于 start。
normal- 这行为类似于拉伸，但在具有指定列宽的多列容器中，列保持其宽度而不是拉伸以填充容器。
space- Between: 它沿 Flex 容器的主轴均匀分布 Flex 项目之间的空间。每对相邻元件具有相同的间距。第一个和最后一个项目分别与主开始边缘和主结束边缘齐平。
space-around: 它沿弹性项目周围均匀分布空间柔性容器的主轴。每对相邻元件具有相同的间距。第一个项目之前和最后一个项目之后的间距等于每对相邻项目之间的空间的一半。
space-evenly: 它均匀地分布项目周围和之间的空间沿弹性容器主轴的弹性项目。相邻项目具有相同的间距、主起始边缘和第一个项目，以及主结束边缘和最后一个项目。
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: start
以下示例演示属性 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: end
以下示例演示属性 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: center
以下示例演示了属性 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: flex-start Value
以下示例演示属性 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: flex-end
以下示例演示了属性 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: left
以下示例演示属性 justify-content:将 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: right
以下示例演示属性 justify-content:将 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: space- Between
以下示例演示了属性 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: space-around
以下示例演示属性 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: stretch
以下示例演示了属性 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>