Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Topics

CSS align-self Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
๐Ÿ‘๏ธ 31 - Views
โณ 4 mins
๐Ÿ’ฌ 1 Comment
CSS align-self Property

Photo Credit to CodeToFun

๐Ÿ™‹ Introduction

The align-self property in CSS is used to override the default alignment of a flex item along the cross axis within its flex container.

This property allows individual flex items to be aligned differently than the rest of the items within the same flex container. It provides more control over the positioning of items in a flex container, making it easier to achieve specific layouts.

๐Ÿ’ก Syntax

The syntax for the align-self property is simple and can be applied to any flex item. It accepts the following values:

Syntax
Copied
Copy To Clipboard
item {
  align-self: value;
}

Here, value can be one of the predefined keywords that dictate the alignment behavior.

๐ŸŽ›๏ธ Default Value

The default value of the align-self property is auto, which means that the flex item will inherit the alignment value from its containerโ€™s align-items property.

๐Ÿ  Property Values

ValueDescription
autoInherits the alignment from the align-items property of the flex container.
flex-startAligns the flex item to the start of the cross axis.
flex-endAligns the flex item to the end of the cross axis.
centerAligns the flex item to the center of the cross axis.
baselineAligns the flex item along the baseline of the cross axis.
stretchStretches the flex item to fill the container along the cross axis (default value if align-items is set to stretch).

๐Ÿ“„ Example

In this example, we will align a single flex item differently from the rest of the items within a flex container.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS align-self Example</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: lightgray;
    }
    .item {
      background-color: coral;
      width: 50px;
      height: 50px;
      margin: 10px;
    }
    .item.special {
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <h1>Align-Self Property Example</h1>
  <div class="container">
    <div class="item"></div>
    <div class="item special"></div>
    <div class="item"></div>
  </div>
</body>
</html>

In this example, the special class is used to override the default alignment and align the item to the end of the cross axis.

๐Ÿ–ฅ๏ธ Browser Compatibility

The align-self property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, always ensure to test your layout across different browsers to confirm consistent behavior.

๐ŸŽ‰ Conclusion

The align-self property provides flexibility in aligning individual flex items within a flex container.

By using align-self, you can override the containerโ€™s default alignment for specific items, allowing for more precise control over the layout. Experiment with different values to achieve the desired alignment and enhance your flexbox-based designs.

๐Ÿ‘จโ€๐Ÿ’ป Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
๐Ÿ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy