CSS justify-content 属性

最新推荐文章于 2025-08-21 13:52:54 发布
原创 最新推荐文章于 2025-08-21 13:52:54 发布 · 7.4w 阅读 · 347 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #sass

本文详细介绍了CSS中justify-content属性的功能及用法，包括如何通过不同属性值控制弹性盒子容器内项目的对齐方式，例如从左至右、居中、均匀分布等，并提供了具体的HTML示例。

CSS 中的justify-content属性用于描述弹性盒子容器的对齐方式。它包含沿着分布在浏览器中的 flex 容器的主轴的内容项之间和周围的空间。

注意：此属性不能用于沿垂直轴描述项目或容器。为了垂直对齐项目，我们可以使用align-items 属性

在应用了 lengths 和 auto margins 属性后，对齐是可能的，即，如果在Flexbox 布局中至少有一个具有flex-grow 属性而不是 0 的灵活元素，那么它不会影响并且有任何影响不会有任何可用空间。

句法：

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

属性值：

flex-start：它是用于从容器开始对齐弹性项目的默认值。

句法：

justify-content: flex-start;

示例：此示例说明justify-content属性，其中属性值设置为flex-start以从容器的开头对齐项目。

  • HTML

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

输出：

flex-end：用于对齐容器末端的弹性项目。

句法：

justify-content: flex-end;

示例： 此示例说明justify-content属性，其中属性值设置为flex-end。

  • HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: flex-end;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>2
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>3
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>4
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
    </div>
</body>
 
</html>

输出： 

center：它在容器的中心对齐弹性项目。

句法：

justify-content: center;

示例： 此示例说明justify-content属性，其中属性值设置为center。

  • HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: center;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>2
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>3
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>4
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
    </div>
</body>
 
</html>

输出：

 

space-between：弹性项目以均匀的间距放置在项目被推到开始和最后一个项目被推到结束的地方。

句法：

justify-content: space-between;

示例：此示例说明justify-content属性，其中属性值设置为space-between。

  • HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: space-between;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>2
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>3
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>4
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
    </div>
</body>
 
</html>

输出：

space-around：弹性项目以相等的间距放置，即在彼此之间和角落之前，之间和之后。

句法：

justify-content: space-around;

示例： 此示例说明justify-content属性，其中属性值设置为space-around。

  • HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: space-around;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
<p>GeeksForGeeks</p>
 
 
        </div>
        <div>2
             
 
<p>GeeksForGeeks</p>
 
 
        </div>
        <div>3
             
 
<p>GeeksForGeeks</p>
 
 
        </div>
        <div>4
             
 
<p>GeeksForGeeks</p>
 
 
        </div>
    </div>
</body>
 
</html>

输出：

space-evenly：项目以相等的间距定位，但与角落的间距不同。

句法：

justify-content: space-evenly;

示例：此示例说明justify-content属性，其中属性值设置为space-evenly。

  • HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: space-evenly;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>2
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>3
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>4
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
    </div>
</body>
 
</html>

输出：

 

initial：根据默认值放置项目。

句法：

justify-content: initial;

示例： 此示例说明justify-content属性，其中属性值设置为initial。

  • HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: initial;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>2
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>3
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>4
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
    </div>
</body>
 
</html>

输出：

 

inherit：根据其继承的父元素值放置项目。

句法：

justify-content: inherit;

示例： 此示例说明justify-content属性，其中属性值设置为inherit。

  • HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> CSS justify-content Property </title>
    <style>
    #box {
        display: flex;
        border: 1px solid black;
        justify-content: inherit;
    }
     
    #box div {
        width: 110px;
        height: 120px;
        border: 1px solid black;
        background: linear-gradient(green, silver);
    }
    </style>
</head>
 
<body>
    <div id="box">
        <div>1
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>2
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>3
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
        <div>4
             
 
<p>GeeksforGeeks</p>
 
 
        </div>
    </div>
</body>
 
</html>

输出：

 

支持的浏览器：CSS justify-content 属性支持的浏览器如下：

  • 谷歌浏览器 29.0、21.0 -webkit-
  • 互联网浏览器 11.0
  • 微软边缘 12.0
  • 火狐 28.0、18.0 -moz-
  • 歌剧 17.0
  • Safari 9.0、6.1 -webkit-
allway2
关注
CSS Grid布局中的align-content和justify-content
weixin_41455464的博客
06-29 270
换句话说，只有当你的Grid容器里还有空余的垂直空间，它才能“大显身手”。别被它们的名字吓着，虽然听起来专业，但实际上，它们的作用就像家里装修时，你指挥师傅把家具摆放在房间里的哪个位置一样。只不过，这次指挥的对象是Grid容器里的内容，而你的目标是让它们乖乖地按照你的想法排列。Grid item之间的间距相等，Grid item的首尾两端也有间距，且间距是Grid item之间间距的一半。Grid item之间的间距相等，Grid item的首尾两端也有间距，且间距是Grid item之间间距的一半。
前端学习（266）:justify-content
歌谣的博客
12-31 450
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
如何使用 justify-content 属性？
最新发布
az44yao的专栏
08-21 709
以下是关于。
justify-content属性
weixin_34315189的博客
06-06 3803
justify-content 用于设置或检索弹性盒子元素在主轴方向上的对齐方式。 属性值：flex-start 属性值：flex-end 属性值：center 属性值：space-between 属性值：space-around 通过具体代码示例各个属性值的效果。 HTML结构 <div class="container flex"> <div cl...
CSS 属性详解：justify-content
weixin_43991457的博客
06-06 819
CSS justify-content 属性详解 justify-content 是 Flexbox 布局的关键属性，用于控制子元素在主轴方向的对齐方式。主要包括以下常用值： flex-start/flex-end：左/右对齐 center：居中对齐 space-between：两端对齐，中间等距 space-around：每个项目两侧等距 space-evenly：完全等距分布 该属性必须配合display:flex使用，适用于导航菜单布局、按钮组对齐等各种需要精确控制元素排列的场景。通过合理选择取值，可
justify-content 属性
weixin_67862007的博客
02-27 2955
子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。
CSS3弹性布局内容对齐（justify-content）属性使用详解
01-19
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响...
详解解决flex布局的justify-content: space-between对齐方式的一个BUG的两种方法
12-13
当我们将`display`属性设置为`flex`并使用`justify-content: space-between`，Flexbox会将子元素沿主轴方向均匀分布，首尾元素贴紧容器边缘，而剩余空间平均分配到各个元素之间。这对于创建整齐的多列布局非常有用。...
CSS基本使用(一)--justify-content 属性
qq_39355295的博客
10-24 929
最近啊发现一个自己之前没有接触过的CSS属性，这里分享一下，学习链接 一、属性值 <style> #start { width:400px; border: 1px solid #c3c3c3; display: flex; justify-content: start; } #center{ width:400px; border: 1px so...
Flex布局之justify-content属性详解
202707的博客
03-08 5433
flex布局之justify-content属性详解
justify-content的属性详解
热门推荐
shaleilei的博客
10-21 2万+
首先我们可以参考下W3C官网的说法,当然你也可以直接看我的,下面是我对justify-content的理解: 1,justufy-content是内容对其的意思,没错是内容,内容,内容,所以我们定义的属性是在外层定义的,内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 语法如下: justify-content: f
【css】常用样式justify-content
ylc的博客
02-21 1578
justify-content 样式使用
flex布局的justify-content属性：设置主轴上子元素的排列方式
听海边涛声
12-15 2810
flex布局的justify-content属性：设置主轴上子元素的排列方式
justify-content 属性详解
cnzzs的博客
02-19 2020
???? CSS justify-content 详解justify-content 是 Flexbox 弹性布局(display: flex)的属性之一，用于控制子元素在主轴(水平或垂直方向)上的对齐方式。???? 1. justify-content 的适用范围 • 必须在 display: flex 的父元素上使用。 • 用于控...
掌握CSS Flex布局：justify-content详解
爱的叹息的专栏
05-19 1642
justify-content 是 CSS Flex 布局中的关键属性，用于控制主轴（main axis）上子元素的对齐方式。它仅在设置了 display: flex 的容器中生效。常见的属性值包括 flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（首尾贴边，间距均匀）、space-around（每个子项两侧有相等间距）和 space-evenly（所有间距相等）。该属性适用于按钮组、导航栏等布局场景，结合 align-items 可实现更灵活
CSS3弹性布局中的justify-content、flex-direction的有机组合
Rudon滨海渔村的博客
02-21 1681
[1] 定义 1. 先看个大概： /* 对齐方式 */ justify-content: center; /* 居中排列 */ justify-content: start; /* 从行首开始排列 */ justify-content: end; /* 从行尾开始排列 */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify
justify-content
07-30
### `justify-content` 属性详解 `justify-content` 是 CSS Flexbox 布局中的一个关键属性，用于控制弹性容器（flex container）内部项目（flex items）在主轴（main axis）上的对齐方式。通过调整此属性，可以轻松实现各种水平或垂直方向上的对齐效果，具体行为取决于 `flex-direction` 的设置。 #### 基本用法 当 `flex-direction` 为默认值 `row`（即水平方向）时，`justify-content` 控制项目在水平方向上的对齐方式。常见的取值包括： - `flex-start`：项目在主轴上从起点开始对齐（默认值）。 - `flex-end`：项目在主轴上从终点开始对齐。 - `center`：项目在主轴上居中对齐。 - `space-between`：项目在主轴上均匀分布，第一个项目在起点，最后一个项目在终点。 - `space-around`：项目在主轴上均匀分布，每个项目两侧的间距相等。 - `space-evenly`：项目在主轴上均匀分布，所有项目之间的间距以及与容器边缘的间距都相等。 例如，以下代码展示了如何将一组按钮在水平方向上居中对齐： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: flex; justify-content: center; } </style> </head> <body> <div> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </div> </body> </html> ``` 当 `flex-direction` 设置为 `column`（即垂直方向）时，`justify-content` 的作用会相应地调整为控制项目在垂直方向上的对齐方式。例如，以下代码实现了垂直方向上的居中对齐： ```css .container { display: flex; flex-direction: column; justify-content: center; /* 现在是垂直方向居中 */ } ``` #### 示例 假设希望在水平方向上将一组按钮右对齐，可以使用 `justify-content: end;`，如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { display: flex; justify-content: end; } </style> </head> <body> <div> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </div> </body> </html> ``` 通过合理运用 `justify-content`，可以轻松实现各种复杂的布局效果，提升网页的视觉体验和用户交互性[^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值