- Trending Categories
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 default value to align content in CSS ?
CSS is a language for the web, which is majorly used for designing and presenting the web page. It provides us with a lot of properties that will help in the customization process. One such property is the “align content property”.
Align content property is used to distribute space, either in between or around items that belong to a flexbox or a grid. The initial value of this property is “normal”. It has discrete animations, and the computed value is always equal to what is specified.
Point to note is that, it is not an inheritable property. It is a property that is widely supported by most browsers.
The various values that can be provided to this property are described as below −
Start − This is used when you want the content or items to begin packing from the start of the container element.
End − This is used when you want the content or items to begin packing from the end of the container element.
Center − It is used to pack the child elements in the center of the alignment container.
Normal − It is the default value for the align content property.
Flex-start − Used in a flexbox type container and will start aligning the items along the starting edge. However, if we use them on a container that is not a flexbox, this will be treated as start.
Flex-end − Just like flex-start it is also used in a flexbox type container and will start aligning the items along the ending edge. However, if we use them on a container that is not a flexbox, this will be treated as end.
Space-between − The items specified with this property will align along the cross axis of the container and will have same space along adjacent elements.
Space-around − It works similar to space between but along with that the left of the first element and the right of the last element will have space equal to half of that of the space between two adjacent elements.
Space-evenly − This simply means that all the elements have same space between them, unlike space evenly which had only half the space from the beginning of first element and to the end of last element.
Stretch − It automatically changes the size of items within the container that had auto size associated with them.
Besides these, we also have safe and unsafe as values for this property. These are used alongside an alignment keyword and are dependent on the characteristics of the container, like whether overflow will cause a data loss or not. Depending on those conditions we chose whether to keep the alignment or not.
Example
The example for the align content property is given below.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #92a4b5;
}
#mainDiv {
background-color: black;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
#mainDiv div {
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<h1>The example of align-content Property</h1>
<div id="mainDiv">
<div style="background-color: coral"></div>
<div style="background-color: lightblue"></div>
<div style="background-color: pink"></div>
</div>
</body>
</html>
Setting default Value to align content
The term “default value” can actually be referred to as the “initial value” of the property. The default value for align items is “stretch”.
So, we can say that ‘normal’ is somewhat like a special keyword with a specified meaning, but will change depending on the context it is being used. As we cannot define what ‘normal’ will do without having the particular context with us.
We can use normal as default value without any worries, as it will either be deemed invalid and use the fallback value, or it will be deemed valid and also fallback to proper value.
Example
An example code with the default value of align content set to normal is given below −
<!DOCTYPE html>
<html>
<head>
<style>
.FlexBox {
width: 40vw;
height: 54vh;
border: 5px solid blue;
display: flex;
flex-wrap: wrap;
background-color: rgb(170, 210, 170);
align-content: normal;
}
#BoxItem1,
#BoxItem2,
#BoxItem3,
#BoxItem4 {
box-sizing: border-box;
min-height: 20%;
width: 22%;
border: 1.5px dashed red;
margin: 0.5vw;
display: flex;
align-items: center;
justify-content: center;
}
#BoxItem1 {
background-color: rgb(214, 198, 192);
}
#BoxItem2 {
background-color: rgb(198, 198, 49);
}
#BoxItem3 {
background-color: rgb(233, 115, 135);
}
#BoxItem4 {
background-color: rgb(143, 196, 196);
}
</style>
</head>
<body>
<div class="FlexBox">
<div id="BoxItem1">1</div>
<div id="BoxItem2">2</div>
<div id="BoxItem3">3</div>
<div id="BoxItem4">4</div>
</div>
</body>
As we can see that all the items in the container are aligned as the default value, normal, which is stretch as per the specifications of flexbox container.
Conclusion
To conclude, setting default values for positioning content with CSS is a simple and effective way to ensure a consistent design across your website. By setting a single value as the default, you can quickly adjust the placement of all elements on each page without having to change each element individually. This makes it easy for both developers and designers to create a consistent look that fits any theme or theme. You can easily adjust it later according to your needs.
235 Views
