Tutorials


CSS align-self property


The align-self property in CSS allows you to override the align-items property for individual flex items within a flex container. It is used to align a specific flex item along the cross axis (perpendicular to the main axis) of its flex container. This property is useful when you want to align a particular item differently from the others in the container.

Basic Syntax

selector {
  align-self: value;
}

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: center; /* Default alignment for all items */
      height: 300px; /* Set a height to see the alignment effect */
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
      border: 1px solid red;
    }
    .item-special {
      align-self: flex-end; /* Override alignment for this specific item */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item item-special">Item 3 (Special)</div>
  </div>
</body>
</html>

In this example, align-self: flex-end; is used to align the third item to the end of the container, overriding the default alignment set by align-items: center;.

Values for align-self

1. auto (default)

  • Description: The default value. The item inherits the alignment specified by the align-items property of its flex container.
  • Use Case: Use this value when you want the item to follow the container’s default alignment behavior.
.item {
  align-self: auto; /* Inherit alignment from the container */
}

2. flex-start

  • Description: Aligns the flex item to the start of the cross axis of the container. For a horizontal flex direction, this aligns the item to the top of the container.
  • Use Case: Use this value to align the item to the start of the container, regardless of the other items' alignment.
.item {
  align-self: flex-start; /* Align item to the start of the cross axis */
}

3. flex-end

  • Description: Aligns the flex item to the end of the cross axis of the container. For a horizontal flex direction, this aligns the item to the bottom of the container.
  • Use Case: Use this value to align the item to the end of the container.
.item {
  align-self: flex-end; /* Align item to the end of the cross axis */
}

4. center

  • Description: Centers the flex item along the cross axis of the container. For a horizontal flex direction, this centers the item vertically within the container.
  • Use Case: Use this value to center the item along the cross axis.
.item {
  align-self: center; /* Center item along the cross axis */
}

5. baseline

  • Description: Aligns the flex item based on its text baseline. Useful for aligning text or items with varying heights.
  • Use Case: Use this value to align the item’s baseline with other items in the container.
.item {
  align-self: baseline; /* Align item based on its text baseline */
}

6. stretch

  • Description: Stretches the flex item to fill the container along the cross axis. This is the default value for align-items but can be overridden with align-self.
  • Use Case: Use this value to have the item stretch to fill the container’s cross axis.
.item {
  align-self: stretch; /* Stretch item to fill the cross axis */
}

Practical Examples

Example 1: Align Item to the End

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: center; /* Default alignment for all items */
      height: 300px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightblue;
      border: 1px solid blue;
    }
    .item-special {
      align-self: flex-end; /* Align this item to the end of the cross axis */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item item-special">Item 3 (Special)</div>
  </div>
</body>
</html>

In this example, the third item is aligned to the bottom of the container, while the other items are centered.

Example 2: Center Item Individually

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: flex-start; /* Default alignment for all items */
      height: 300px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightgreen;
      border: 1px solid green;
    }
    .item-special {
      align-self: center; /* Center this item along the cross axis */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item item-special">Item 3 (Special)</div>
  </div>
</body>
</html>

Here, the third item is centered vertically within the container, while the other items are aligned to the top.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about