CSS Justify-Content 属性

17 Mar 2025 | 4 分钟阅读

CSS 属性 justify-content 指示如何对齐弹性盒子容器。它包括浏览器中跨弹性容器主轴的内容项之间和周围的区域。

请注意，此属性沿垂直轴无法描述任何内容。align-items 属性可用于垂直对齐元素。

如果 Flexbox 布局中至少有一个具有 flex-grow 属性（不为 0）的弹性元素，则它不会有影响且无效，因为将没有任何可用空间。在应用长度和自动边距设置后，对齐才可行。

语法

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

此属性的默认值是 flex-start。让我们来深入了解它的属性值。

属性值

flex-start：将弹性元素从容器的开头对齐的默认设置是 flex-start。
inherit：元素的排列方式遵循其继承父元素的值。
flex-end：它将弹性元素对齐到容器的末尾。
center：弹性元素沿容器的中心对齐。
space-between：弹性项目之间的间距相等，第一个项目推到前面，最后一个项目推到后面。
space-around：弹性元素放置在彼此之前、之间和之后，并且角落处间距相等。
space-evenly：项目在空间上均匀排列，但与角落的距离不同。

Flex-start

示例：本示例展示了 justify-content 属性，其属性值设置为 flex-start，用于从容器开头对齐项目。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with flex-start as property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-start;
}
#box div {
width: 170px;
height: 120px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

Flex-end

示例：本示例展示了 justify-content 属性，其属性值指定为 flex-end。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with flex-end property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-end;
}

#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>

<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

中心

示例：本示例展示了 justify-content 属性，其值调整为 center。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as center </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: center;
}

#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>

<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

Space-between

示例：本示例展示了 justify-content 属性，其属性值指定为 space-between。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-between;
}

#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>

<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

Space-around

示例：本示例显示了 justify-content 属性，其属性值指定为 space-around。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-around;
}

#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>

<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

Space-evenly

示例：本示例显示了 justify-content 属性，其属性值定义为 space-evenly。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-evenly;
}

#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>

<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

初始

示例：本示例展示了如何使用 justify-content 属性，并将属性值设置为 initial。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: initial;
}

#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>

<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

Inherit

示例：本示例显示了 justify-content 属性在属性值设置为 inherit 时的工作方式。

语法

程序

<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: inherit;
}

#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>

<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>

输出

支持的 Web 浏览器

以下是 CSS justify-content 属性支持的浏览器列表

Google Chrome 29.0 及以上版本
使用 Internet Explorer 11.0 或更高版本
Microsoft Edge 12.0 及以上版本
Opera 12.1 及以上版本
Firefox 20.0
Safari 9.0 及以上版本

下一主题CSS text-decoration

CSS Justify-Content 属性

属性值

Flex-start

Flex-end

中心

Space-between

Space-around

Space-evenly

初始

Inherit

支持的 Web 浏览器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Justify-Content 属性

属性值

Flex-start

Flex-end

中心

Space-between

Space-around

Space-evenly

初始

Inherit

支持的 Web 浏览器

相关帖子

CSS Peeper

CSS Triangles

CSS 最新版本

CSS Border Width

CSS font-family

CSS resize

CSS Blur

CSS Border Box

CSS 图片

CSS calc()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器