CSS 属性

CSS justify-self 属性通过为所有框项设置默认的 justify-self,为每个框提供沿相关轴的默认对齐方式。

属性值

  • auto: 该值基于父框的 justify-items 属性,除非该框缺少父框或者是绝对定位,默认为表示正常的"auto"。

  • normal: 该关键字的效果取决于布局模式:

    • 关键字与块级布局中的 start 相同。

    • 在绝对定位中,关键字充当替换框的"开始",其他绝对定位框的"拉伸"。

    • 此关键字在表格单元格布局中没有意义,因为它的属性被忽略。

    • 此关键字在 Flexbox 布局中毫无意义,因为它的属性被忽略。

    • 对于网格项,此关键字表现为拉伸,但具有长宽比或内在的框除外大小,其功能类似于开始。

  • start: 将项目对齐相应轴中对齐容器的起始边缘。

  • end: 将项目在相应轴的对齐容器的末端边缘对齐。

  • center: 对齐项目位于对齐容器的中心。

  • flex-start: 该值被视为非 Flex 容器子项的开始。

  • flex-end: 该值被视为非 Flex 容器子项的结束。

  • self-start: 项目对齐到适当轴上对齐容器的起始边缘。

  • self-end: 项目与适当轴上对齐容器的结束边缘对齐。

  • left: 项目与对齐容器的左边缘对齐。如果属性的轴不平行于内联轴,则该值的作用类似于 start。

  • right: 项目在适当的轴上与对齐容器的右边缘对齐。如果属性的轴不平行于内联轴,则该值的作用类似于 start。

  • baseline,firstbaseline,lastbaseline: 定义与框的第一条或最后一条基线的对齐方式在其基线共享组中,将框的第一个或最后一个基线集与适当的基线对齐,开始作为第一个基线的后备,结束作为最后一个基线的后备。

  • stretch: 当项目的总大小小于对齐容器时,自动调整大小的项目均匀放大,根据最大高度/最大宽度限制,组合尺寸填充对齐容器。

  • safe: 如果项目的大小溢出对齐容器,则将项目对齐,就像启动对齐模式一样。

  • unsafe: 无论如何,都会遵循指定的对齐值项目和对齐容器的相对大小。

适用范围

块级框、绝对定位框和网格项。

语法

基本关键字

justify-self: auto;
justify-self: normal;
justify-self: stretch; 

位置对齐

justify-self: center;
justify-self: start; 
justify-self: end; 
justify-self: flex-start;
justify-self: flex-end; 
justify-self: self-start;
justify-self: self-end;
justify-self: left; 
justify-self: right; 

基线对齐

justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline; 

溢出对齐(用于位置对齐)

justify-self: safe center;
justify-self: unsafe center; 

CSS justify-self: auto 

以下示例演示 justify-self: auto 属性采用其网格单元的整个宽度 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
      width: 90%;
   }
   .item {
      background-color: lightgray;
   }
   .item2 {
      background-color: violet;
      justify-self: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: auto</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: normal

以下示例演示属性 justify-self:normal将 item2 与网格单元的左边缘对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: normal</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: stretch

以下示例演示了 justify-self:stretch属性拉伸项目以填充网格单元的整个宽度:

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
       width: 90%;
   }
   .item {
      background-color: lightgray;
     
   }
   .item2 {
      background-color: violet;
      justify-self: stretch;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: stretch</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: start

以下示例演示 justify-self: start 属性将第二个项目与网格单元的开头(左侧)对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: start;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: start</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: end 

以下示例演示了 justify-self: end 属性将第二个项目与网格单元的末尾(右侧)对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: end;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: end</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: center 

下面的例子演示了 justify-self: center 属性将第二个项目对齐到网格单元的中心 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: center;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: center</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: flex-start 

以下示例演示了 justify-self:flex-start 属性将第二个项目与网格单元格的开头对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: flex-start;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: flex-start</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: flex-end 

以下示例演示 justify-self:flex-end 属性将第二个项目与网格单元的末尾对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: flex-end;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: flex-end</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: self-start 

以下示例演示justify-self: self-start 属性将第二个项目与网格单元的起始边缘对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: self-start;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: self-start</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: self-end 

以下示例演示justify-self: self-end 属性将第二个项目与网格单元的结束边缘对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: self-end;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: self-end</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: left 

以下示例演示了 justify -self: left 属性将第二个项目与网格单元的左边缘对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: left;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: left</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: right 

以下示例演示 justify-self: right属性将第二个项目与网格单元格的右边缘对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: right;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: right</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: baseline

以下示例演示了 justify-self:baseline属性对齐第二个项目沿着网格单元基线的项目。基线是一条假想的线,它将根据文本所在的位置对齐元素 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: baseline;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: baseline</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html> 

CSS justify-self: last baseline

以下示例演示了 justify-self :last baseline属性将第二个项目沿着网格单元的最后一个基线对齐 -

<html>
<head>
<style> 
   .container {
      border: 1px solid black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      background-color: greenyellow;
   }
   .container > div {
      border: 2px solid black;
      padding: 5px;
      text-align: center;
   }
   .item {
      background-color: lightgray;
      width: 90%;
   }
   .item2 {
      background-color: violet;
      width: 60%;
      justify-self: last baseline;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item2">justify-self: last baseline</div>  
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
   </div>
</body>
</html>