CSS justify-content 属性

CSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

实例

在容器中央对齐 flex 项目：

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: center;
}
#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>
<h2>justify-content 属性</h2>
<p>The "justify-content: center;" 在容器中央对齐弹性项目：</p>
<div id="main">
  <div style="background-color:coral;">1</div>
  <div style="background-color:lightblue;">2</div>
  <div style="background-color:pink;">3</div>
</div>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 justify-content 属性。</p>
</body>
</html>

运行一下

定义和用法

justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。

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

默认值：	flex-start
继承：	否
动画制作：	不支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.justifyContent="space-between"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

跟随 -webkit- 或 -moz- 的数字规定使用前缀的首个版本。

属性
justify-content	29.021.0 -webkit-	11.0	28.018.0 -moz-	9.06.1 -webkit-	17.0

CSS 语法

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

属性值

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器中央。
space-between	项目在行与行之间留有间隔。
space-around	项目在行之前、行之间和行之后留有空间。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

更多实例

在容器的开头对齐弹性项目（默认）：

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: flex-end;
}
#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>
<h2>justify-content 属性</h2>
<p>The "justify-content: flex-end;" 在容器末尾对齐弹性项目：</p>
<div id="main">
  <div style="background-color:coral;">1</div>
  <div style="background-color:lightblue;">2</div>
  <div style="background-color:pink;">3</div>
</div>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 justify-content 属性。</p>
</body>
</html>

运行一下

在容器末尾对齐弹性项目：

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: space-between;
}
#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>
<h2>justify-content 属性</h2>
<p>The "justify-content: space-between;" 在行之间为弹性项目留出空间：</p>
<div id="main">
  <div style="background-color:coral;">1</div>
  <div style="background-color:lightblue;">2</div>
  <div style="background-color:pink;">3</div>
</div>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 justify-content 属性。</p>
</body>
</html>

运行一下

在行之间显示带有间隔的弹性项目：

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: flex-start;
}
#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>
<h2>justify-content 属性</h2>
<p>The "justify-content: flex-start;" 在容器开头对齐弹性项目（默认）：</p>
<div id="main">
  <div style="background-color:coral;">1</div>
  <div style="background-color:lightblue;">2</div>
  <div style="background-color:pink;">3</div>
</div>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 justify-content 属性。</p>
</body>
</html>

运行一下

实例

在行之前、行之间和行之后显示带有间隔的弹性项目：

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: space-around;
}
#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>
<h2>justify-content 属性</h2>
<p>"justify-content: space-around;" 在行之前、行之间和行之后为弹性项目留出空间：</p>
<div id="main">
  <div style="background-color:coral;">1</div>
  <div style="background-color:lightblue;">2</div>
  <div style="background-color:pink;">3</div>
</div>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 justify-content 属性。</p>
</body>
</html>

运行一下

CSS justify-content 属性

实例

定义和用法

浏览器支持

CSS 语法

属性值

更多实例

实例

相关页面

分类导航