Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set align-self property to its default value in CSS?
CSS or Cascading Style Sheets provides the align-self property to control the alignment of individual flex items within a flex container. By default, align-self is set to auto, which means the element inherits the alignment from its parent container's align-items property.
Syntax
selector {
align-self: auto;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default. Inherits the align-items value of the parent container |
flex-start |
Aligns the item to the start of the cross axis |
flex-end |
Aligns the item to the end of the cross axis |
center |
Centers the item along the cross axis |
baseline |
Aligns the item along the baseline |
stretch |
Stretches the item to fill the container |
Method 1: Using the Auto Value
The simplest way to reset the align-self property to its default value is to explicitly set it to auto
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f0f0f0;
gap: 10px;
}
.item {
width: 100px;
height: 50px;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.div1 { align-self: flex-start; }
.div2 { align-self: auto; }
.div3 { align-self: flex-end; }
</style>
</head>
<body>
<h3>Reset align-self using auto value</h3>
<div class="container">
<div class="item div1">Start</div>
<div class="item div2">Auto</div>
<div class="item div3">End</div>
</div>
</body>
</html>
Three flex items are displayed: the first aligned to the top (flex-start), the middle one centered (auto inherits center from parent), and the third aligned to the bottom (flex-end).
Method 2: Using the :not() Selector
You can use the :not() selector to reset align-self for all elements except specific ones
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f0f0f0;
gap: 10px;
}
.item {
width: 100px;
height: 50px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.item:not(.box1):not(.box3) {
align-self: auto;
}
.box1 {
align-self: flex-start;
background-color: #2ecc71;
}
.box3 {
align-self: flex-end;
background-color: #9b59b6;
}
</style>
</head>
<body>
<h3>Reset align-self using :not() selector</h3>
<div class="container">
<div class="item box1">Java</div>
<div class="item">Python</div>
<div class="item box3">PHP</div>
</div>
</body>
</html>
Three flex items are displayed with different alignments: Java (green) at the top, Python (blue) in the center using auto value, and PHP (purple) at the bottom.
Conclusion
The align-self property can be reset to its default value by setting it to auto or by removing the property entirely. This allows flex items to inherit the alignment behavior from their parent container's align-items property.
Updated on: 2026-03-15T16:40:44+05:30
412 Views
Advertisements