CSS - align-self Property

The align-self property in CSS is used to control the alignment of an individual item within a container that is using a flexbox or grid layout. While align-items is used to set the default alignment for all items in a container, align-self allows you to override that alignment for a specific item.

The items are aligned on the cross-axis in flexbox, whereas in a grid, the property aligns the items inside the grid area.

The align-self property does not apply on block-level boxes, or to table cells. In case the flexbox item's cross-axis margin is set as auto, then align-self value is ignored.

Possible Values

The align-self property can have following values:

  • auto: Aligns the item based on the parent's align-items value.

  • normal: Based on the layout mode, the effect of normal keyword changes:

    • Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned.

    • Behaves like stretch in static position of absolutely-positioned layouts.

    • Behaves like stretch for flex items.

    • Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start.

    • Does not apply to block-level boxes , and to the table cells.

  • flex-start: Aligns the cross-start margin edge of the flex item with the cross-start edge of the line.

  • flex-end: Aligns the cross-end margin edge of the flex item with the cross-end edge of the line.

  • center: Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions.

  • self-start: Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis.

  • self-end: Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis.

  • baseline, first baseline, last baseline:

    • First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items.

    • These values specify the involvment of first- or last-baseline alignment in the alignment of the content.

    • start is the fallback alignment for first-baseline and end for last-baseline.

  • stretch: When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width.

  • safe: When the item overflows the container, the alignment is set as per the start value.

  • unsafe: Irrespective of the size of the item and the alignment container, the specified alignment value is honored.

Applies to

Flex items, grid items, and absolutely-positioned boxes

Syntax

Keyword Values

align-self: auto;
align-self: normal;

Positional Alignment

align-self: center; 
align-self: start; 
align-self: end; 
align-self: self-start; 
align-self: self-end; 
align-self: flex-start; 
align-self: flex-end;

Baseline Alignment

align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch;

CSS align-self - auto Value

The following example demonstrates that align-self: auto property places the third flex item to their intial position inside the flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: auto;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - start Value

The following example demonstrates that align-self: start property places the third flex item to the start of the cross axis of a flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: start;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - end Value

The following example demonstrates that align-self: end property places the third flex item to the end of the cross axis of a flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: end;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - center Value

The following example demonstrates that align-self: end property places the third flex item at the center of the cross axis of a flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - flex-start Value

The following example demonstrates that align-self: flex-start property places the third flex item to the start of the cross axis of a flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: flex-start;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - flex-end Value

The following example demonstrates that align-self: flex-end property places the third flex item to the end of the cross axis of a flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: flex-end;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - self-start Value

The following example demonstrates that align-self: self-start property aligns the third flex item at the start of the flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: self-start;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - self-end Value

The following example demonstrates that align-self: self-end property aligns the third flex item at the end of the flex container −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: self-end;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - baseline Value

The following example demonstrates that align-self: baseline property aligns the third flex item along their baseline −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: baseline;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self - stretch Value

The following example demonstrates that align-self: stretch property stretch the flex item vertically to fill the available space of the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      flex-wrap: wrap;
      align-self: stretch;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>
Advertisements