码农教程 - 一技在手,衣食无忧! tools

目录

CSS justify-content 属性

❮上一节 完整的CSS参考 下一节❯

示例

将弹性项目与容器的中心对齐：

div {
  display: flex;
  justify-content: center;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个justify-content当项目未使用主轴（水平）上的所有可用空间时，属性会对齐灵活容器的项目。

提示：使用align-items属性垂直对齐项目。

笔记：这个justify-content属性也可以用在网格容器上，以内联方向对齐网格项。对于英文页面，内联方向是从左到右，块方向是向下。

展示演示❯

默认值： 弹性启动
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.justifyContent="space-between"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit- 或 -moz- 的数字指定使用前缀的第一个版本。

Property
justify-content 29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0

CSS 语法

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

属性值

Value Description Play it
flex-start Default value. Items are positioned at the beginning of the container Demo ❯
flex-end Items are positioned at the end of the container Demo ❯
center Items are positioned in the center of the container Demo ❯
space-between Items will have space between them Demo ❯
space-around Items will have space before, between, and after them Demo ❯
space-evenly Items will have equal space around them Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

将弹性项目对齐在容器的开头（这是默认设置）：

div {
  display: flex;
  justify-content: flex-start;
}
亲自试一试 »

示例

对齐容器末端的弹性项目：

div {
  display: flex;
  justify-content: flex-end;
}
亲自试一试 »

示例

显示弹性项目并在行之间留有空间：

div {
  display: flex;
  justify-content: space-between;
}
亲自试一试 »

示例

显示 Flex 项目，并在行前、行间和行后留有空格：

div {
  display: flex;
  justify-content: space-around;
}
亲自试一试 »

带网格的示例

将网格项目显示到最后：

#container {
 display: grid;
 justify-content: end;
}
亲自试一试 »

相关页面

CSS教程：CSS 弹性盒

CSS教程：CSS 网格

CSS 参考：对齐内容属性

CSS 参考：对齐项目属性

CSS 参考：自我对齐属性

HTML DOM 参考：justifyContent 属性


❮上一节 完整的CSS参考 下一节❯