加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS justify-self 属性 详解

css3基础 2023-07-29 15:56:18小码哥的IT人生shichen

CSS justify-self 属性

定义和用法

justify-self 属性在其网格单元格内沿行内方向对齐网格项。

对于英文页面，行内方向是从左到右，块方向是向下。

如需使此属性具有任何对齐效果，网格项需要在行内方向上在自身周围留出可用空间。

提示：如需在块方向而不是行内方向对齐网格项，请使用 align-self 属性 或 align-items 属性 属性。

另请参阅：

CSS 教程：CSS Grid

CSS 教程：CSS 定位

CSS 参考手册：align-content 属性

CSS 参考手册：align-items 属性

CSS 参考手册：align-self 属性

CSS 参考手册：direction 属性

CSS 参考手册：grid 属性

CSS 参考手册：grid-template-columns 属性

CSS 参考手册：position 属性

CSS 参考手册：writing-mode 属性

另请参阅：

实例

例子 1

在其网格单元的右侧对齐网格项：

.red {
  display: grid;
  justify-self: right;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 70%;
  aspect-ratio: 2/1;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#container > div {
  border: 1px solid black;
}
.blue {
  background-color: lightblue;
  width: 60%;
  justify-self: right;
}
.red {
  background-color: coral;
  width: 80%;
}
.green {
  background-color: lightgreen;
  width: 70%;
}
</style>
</head>
<body>
<h1>justify-self: right</h1>
<p>默认情况下，所有网格项目都向左对齐，除了已设置 justify-self 属性值 'right' 的蓝色网格项目。</p>
<div id="container">
  <div class="red">红色</div>
  <div class="blue">蓝色<br>justify-self: right</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
  <div class="green">绿色</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子 2：justify-self 对比 justify-items

相对于容器的对齐方式设置为“居中”，网格项目本身设置为“右对齐”。属性值 'right' 占上风：

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 50%;
  aspect-ratio: 2/1;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}
#container > div {
  border: 1px solid black;
}
.blue {
  background-color: lightblue;
  width: 50%;
  justify-self: right;
}
.red {
  background-color: coral;
  width: 40%;
}
.green {
  background-color: lightgreen;
  width: 60%;
}
</style>
</head>
<body>
<h1>justify-items 对比 justify-self</h1>
<div id="container">
  <div class="red">红色</div>
  <div class="blue">蓝色</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子 3：在绝对定位的网格项目上设置 justify-self

将绝对定位的网格项的对齐方式设置为 'right'：

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 50%;
  aspect-ratio: 2/1;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}
#container > div {
  border: 1px solid black;
}
.blue {
  background-color: lightblue;
  width: 50%;
  justify-self: right;
}
.red {
  background-color: coral;
  width: 40%;
}
.green {
  background-color: lightgreen;
  width: 60%;
}
</style>
</head>
<body>
<h1>justify-items 对比 justify-self</h1>
<div id="container">
  <div class="red">红色</div>
  <div class="blue">蓝色</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子 4：writing-mode

当网格容器元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向为向下。结果是容器的起点从左侧移到顶部，容器的末端从右侧移到底部：

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 50%;
  aspect-ratio: 2/1;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  writing-mode: vertical-rl;
}
#container > div {
  border: 1px solid black;
}
.blue {
  background-color: lightblue;
  inline-size: 60%;
  justify-self: end;
}
.red {
  background-color: coral;
  inline-size: 50%;
}
.green {
  background-color: lightgreen;
  inline-size: 70%;
}
</style>
</head>
<body>
<h1>设置 justify-self 以及 writing-mode: vertical-rl</h1>
<p>网格项默认沿行内方向对齐到网格容器的开始处，蓝色 div 将 justify-self 属性设置为 'end'。通过使用 writing-mode 属性，行内方向从水平方向移动到向下方向，所以现在行内方向上的容器末端位于容器的底部而不是右侧。</p>
<div id="container">
  <div class="red">红色</div>
  <div class="blue">蓝色</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子 5：direction

网格容器元素的 direction 属性值设置为“rtl”时，行内方向是从右到左。结果是容器的起点从左侧移到右侧，容器的末端从右侧移到左侧：

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 50%;
  aspect-ratio: 2/1;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}
#container > div {
  border: 1px solid black;
}
.blue {
  background-color: lightblue;
  width: 50%;
  justify-self: end;
}
.red {
  background-color: coral;
  width: 40%;
}
.green {
  background-color: lightgreen;
  width: 60%;
}
</style>
</head>
<body>
<h1>设置 justify-self 以及 direction: rtl</h1>
<p>网格项目沿行内方向在网格容器的开始处对齐。行内方向随 direction 属性值“rtl”发生变化，因此现在行内方向上的容器末端位于容器的左侧，而不是右侧。</p>
<div id="container">
  <div class="red">红色</div>
  <div class="blue">蓝色</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 语法

justify-self: auto|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

属性值

值 描述
auto 默认值。继承网格容器的 justify-self 属性值。
normal

取决于布局上下文，但类似于未设置 size 时网格项在网格布局中的 'stretch'。

如果设置了 size ，则属性值的行为类似于 'start'。
stretch 如果未设置 inline-size（宽度），则拉伸以填充网格单元格。
start 在行内方向的开头对齐项目。
left 将项目左对齐。
center 将项目对齐到中心。
end 在行内方向的末尾对齐项目。
right 将项目右对齐。
overflow-alignment
  • 'safe' 会将项目的对齐方式设置为 'start'，如果内容溢出。
  • 'unsafe' 保持对齐值，无论项目内容是否溢出。
baseline alignment 元素与父元素的基线对齐。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： auto
继承： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.justifySelf="right"

浏览器支持

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

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024