CSS - justify-self Property

CSS justify-self property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items.

Possible Values

  • auto − The value is based on the justify-items property of the parent box, except when the box lacks a parent or is absolutely positioned, where it defaults to 'auto' representing normal.

  • normal − This keyword's effect is determined on the layout mode:

    • The keyword is the same as start in block-level layouts.

    • In absolute positioning, the keyword acts as a 'start' for replaced boxes and a 'stretch' for other absolute-positioned boxes.

    • This keyword is meaningless in table cell layouts because its property is disregarded.

    • This keyword is meaningless in flexbox layouts because its property is disregarded.

    • For grid items, this keyword behaves as a stretch, except for boxes with an aspect ratio or intrinsic sizes, where it functions like a start.

  • start − Aligns the items at the start edge of the alignment container in the corresponding axis.

  • end − Aligns the items at the end edge of the alignment container in the corresponding axis.

  • center − Aligns the items at the centre of the alignment container.

  • flex-start − This value is considered as start by items that are not children of a flex container.

  • flex-end − This value is considered as end by items that are not children of a flex container.

  • self-start − The items are aligned to the start edge of the alignment container in the appropriate axis.

  • self-end − The items are aligned to the end edge of the alignment container in the appropriate axis.

  • left − The items are aligned to the left edge of the alignment container. This value acts like start if the property's axis is not parallel to the inline axis.

  • right − The items are aligned to the right edge of the alignment container in the appropriate axis. This value acts like start if the property's axis is not parallel to the inline axis.

  • baseline, first baseline, last baseline − Defines alignment with the first or last baseline of a box in its baseline-sharing group, aligns the box's first or last baseline set with the appropriate baseline, with start as the fallback for the first baseline and end for the last baseline.

  • stretch − When the aggregate size of the items is less than the alignment container, auto-sized items are evenly enlarged, according to max-height/max-width limitations, the combined size fills the alignment container.

  • safe − Aligns the items as if the alignment mode were started if its size overflows the alignment container.

  • unsafe − The specified alignment value is honored regardless of the relative sizes of the item and alignment container.

Applies To

Block-level boxes, absolutely-positioned boxes, and grid items.

Syntax

Basic Keywords

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

Positional Alignment

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;

Baseline Alignment

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

Overflow Alignment (for positional alignment only)

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

CSS justify-self - auto Value

The following example demonstrates the justify-self: auto property taking the full width of its grid cell −

<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 Value

The following example demonstrates property justify-self: normal aligns item2 to the left edge of the grid cell −

<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 Value

The following example demonstrates the justify-self: stretch property stretches the items to fill the entire width of the grid cell −

<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 Value

The following example demonstrates the justify-self: start property aligns the second item to the start (left) of the grid cell −

<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 Value

The following example demonstrates the justify-self: end property aligns the second item to the end (right) of the grid cell −

<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 Value

The following example demonstrates the justify-self: center property aligns the second item at the center of the grid cell −

<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 Value

The following example demonstrates the justify-self: flex-start property aligns the second item to the start of the grid cell −

<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 Value

The following example demonstrates the justify-self: flex-end property aligns the second item to the end of the grid cell −

<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 Value

The following example demonstrates the justify-self: self-start property aligns the second item to the start edge of the grid cell −

<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 Value

The following example demonstrates the justify-self: self-end property aligns the second item to the end edge of the grid cell −

<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 Value

The following example demonstrates the justify-self: left property aligns the second item to the left edge of the grid cell −

<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 Value

The following example demonstrates the justify-self: right property aligns the second item to the right edge of the grid cell −

<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 Value

The following example demonstrates the justify-self: baseline property aligns the second item along the basline of the grid cell. The baseline is an imaginary line that will align the elements based on where their text is located −

<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 Value

The following example demonstrates the justify-self: last baseline property aligns the second item along the last basline of the grid cell −

<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>
Advertisements