Home >Web Front-end >CSS Tutorial >How to set default values to align content in CSS?
How to set default values to align content in CSS?
- WBOYforward
- 2023-08-30 09:09:06825browse
CSS is a web language primarily used for designing and rendering web pages. It provides us with many properties that help in the customization process. One of these properties is "aligned content property".
The align content property is used to allocate space between or around items that are part of a flexbox or grid. The initial value of this attribute is "Normal". It has discrete animation and the calculated value is always equal to the specified value.
It should be noted that it is not an inheritable property. This is a property widely supported by most browsers.
The various values that can be provided for this property are described below -
Start - Used when you want content or items to start packaging from the beginning of the container element.
End - Used when you want content or items to be packed starting at the end of the container element.
Center - Used to pack child elements in the center of an aligned container.
Normal - This is the default value for the align content property.
Flex-start - for flexbox type containers and will start aligning items along the starting edge. However, if we use them on a container that is not Flexbox, this will be considered a start.
Flex-end - Like flex-start, this is also used in Flexbox type containers and will start aligning items along the end edge. However, if we use them on a container that is not Flexbox, this will be considered an end.
Space- Between - Items specified using this property will be aligned along the horizontal axis of the container, with equal spacing along adjacent elements.
Space-around - It works similarly to the space between, but the space to the left of the first element and to the right of the last element will be equal to half of that element The space between two adjacent elements.
Space-evenly - This simply means that there is equal space between all elements, unlike even space, which is only from the beginning of the first element to the end of the last element Half the space of the last element.
Stretch - It automatically changes the size of items within a container that are associated with auto-sizing.
In addition to this, we have safe and unsafe as values for this property. They are used with the alignment keyword and depend on the characteristics of the container, such as whether overflow will result in data loss. Based on these conditions, we choose whether to keep the alignment.
Example
An example of aligning content attributes 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>
Set default values to align content
The term "default value" can actually refer to the "initial value" of a property. The default value for alignment items is "Stretch".
So we can say that "normal" is a bit like a special keyword with a specific meaning, but changes depending on the context in which it is used. Because without specific context, we can't define what "normal" would do.
We can use normal as the default value without worrying as it will either be treated as invalid and fallback to the correct value, or treated as valid and fallback to the correct value.
Example
Sample code to set the default value of aligned content 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>
We can see that all items in the container are aligned according to the default value of "normal", that is, stretched according to the specifications of the Flexbox container.
in conclusion
All in all, using CSS to set default values for positioned content is a simple and effective way to ensure a consistent design throughout your website. By setting a single value as the default, you can quickly adjust the position of all elements on every page without having to change each element individually. This makes it easy for developers and designers alike to create a consistent look that fits any theme or theme. You can easily adjust it later if needed.
The above is the detailed content of How to set default values to align content in CSS?. For more information, please follow other related articles on the PHP Chinese website!