Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set align-self property to its default value in CSS?
CSS or Cascading Style Sheets is a powerful tool that provides a range of properties for aligning and positioning elements on a web page. The align-self property is one of the many properties available in CSS, which is used to adjust the alignment of individual flex items within a flex container. By default, align-self is set to auto, which means that the element will inherit the alignment of its parent container. However, this behavior can be changed for individual flex items by setting the align-self property.
scc selector{
align-self: auto;
}
The align-self Property in CSS
Before we discuss how to reset the align-self property to its default value, it is important to understand what align-self is. The align-self property is a sub-property of the flex shorthand property; it is used to align a single flex item along the cross-axis of the container. The default value of the align-self property is auto, which causes the element to inherit the align-items property of its parent container. The align-self property can be set to one of the following values −
Auto (default),
Flex-start,
Flex-end,
Center,
Baseline, and
Stretch
If the align-self property is set to a value other than auto, it overrides the align-items property of the container for that particular element.
Reset align-self to its Default Value in CSS
To reset the align-self property to its default value, the property's auto value can simply be removed from the element's CSS declaration. For example
.element {
align-self: center;
}
When the align-self property is removed from the declaration, it is reset to its default value.
.element {
/* align-self: center; */
}
Now, we will explore several examples for resetting the align-self property to its default value in CSS.
Using the Auto Value
The easy way to reset the align-self property to its default value is to set it to auto. When the value of align-self is set to auto, the flex item is aligned based on the value of the align-items property set on the flex container.
Example
In this example, we will use the auto value to select all .item elements that do not have the .div1 or .div3 class, and set their align-self property to auto. This will ensure that only the .div1 and .div3 and elements will have a custom align-self value.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.item { width: 100px; height: 50px; background-color: white; border: 1px solid black; margin: 10px; }
.div1 { align-self: flex-start; }
.div2 { align-self: auto; }
.div3 { align-self: flex-end; }
</style>
</head>
<body>
<h3>Set align-self property to its default value using the align-self:auto</h3>
<div class="container">
<div class="item div1">HTML</div>
<div class="item div2">CSS</div>
<div class="item div3">JavaScript</div>
</div>
</body>
</html>
Using the :not() Selector
The :not() selector is another approach to reset the align-self property to its default value. This selector allows to select all elements that do not match a certain criteria. using the :not() selector, we can select all elements except those that we want to apply a specific value of align-self to.
Example
In this example, we will use the :not() selector to select all .item elements that do not have the .box1 or .box3 class, and set their align-self property to auto. This will ensure that only the .box1 and .box3 and elements will have a custom align-self value.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h3{ text-align:center;}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.item:not(.box1):not(.box3) { align-self: auto;}
.item { width: 100px; height: 50px; border: 1px solid black; margin: 10px; background-color:pink; }
.box1 { align-self: flex-start; background-color:lightgreen;}
.box3 { align-self: flex-end; background-color:lightblue; }
</style>
</head>
<body>
<h3>Set align-self property to its default value using the :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>
Conclusion
The align-self property is a powerful tool for setting the vertical alignment of flex items within a flex container. However, there may be times when we need to reset the align-self property to its default value in CSS. By resetting the align-self property to its default value of auto, or by using align-items instead, we can simplify the CSS and avoid alignment issues.
164 Views
