CSS How to make flexible items the same length regardless of their content
CSS: How to Make Flexible Items the Same Length Regardless of Their Content
Let’s explore the flex property. Flex is a simple property that sets conditions for the length of a flexible element, allowing it to adjust based on the amount of content or the width of the viewport.
Flex Properties
The component properties of the flex property are defined as follows
Flex-grow
This property sets the amount of space allocated to the item within the remaining space within the flex-container. In other words, it sets whether the item’s main size is allowed to grow beyond that. This property’s value is an integer.
- The amount of whitespace is equal to the size of the flex container minus the sum of the sizes of all flex items. If all sibling items have the same flex grow factor, they will receive the same amount of remaining space; otherwise, it will be distributed according to the proportions set by the various flex grow factors.
-
This property has an initial value of 0. It applies to all items in the flexbox, including pseudo-elements. It is non-inheritable and has a number as its animation type.
Flex-shrink
Just as the flex-grow property allows flexbox to grow, this property allows flexitems to shrink if their content does not fit within the specified space.
- This property has an initial value of 1, not 0. It also applies to all items in the flexbox, including pseudo-elements. Like flex-grow, this property is non-inheritable and has a number as its animation type.
Flex-base
This property is used to specify what the container’s initial primary size will be. Unless otherwise specified with box-sizing, it determines the size of the content box.
- It can have two possible values. The first is “content,” which will vary based on the amount of content. The second value is a width value, which can be either an absolute value or a percentage. You can also use the auto keyword for the width.
Using the flex property
As already discussed, flex is a shorthand property. That’s why we can use the flex property by specifying one, two, or all three values.
- When you specify only one property value, it can be a valid value for flex-grow / flex-basis or a global keyword value.
-
When using two values, the first value will be used as the flex-grow value, and the subsequent values will be used as the flex-shrink or flex-basis value.
-
When using three values, the first value will be used for flex-grow, the second value will be used for flex-shrink, and the last value will be used for flex-basis.
Example
Below is an example of using the flex property in CSS.
<!DOCTYPE html>
<html>
<head>
<title>CSS flex Property</title>
<style>
#Target {
width: 500px;
height: 400px;
border: 1px dashed rgb(8, 0, 0);
display: flex;
}
#Target div {
flex: 1 0 auto;
}
.Target1 {
background-color: rgb(193, 169, 169);
}
.Target2 {
background-color: rgb(99, 121, 99);
} .Target3 {
background-color: rgb(221, 233, 221);
}
</style>
</head>
<body>
<h2>Example of using a flex property in CSS</h2>
<div id="Target">
<div class="Target1">Lorem ipsum dolor sit amet.</div>
<div class="Target2">Lorem, ipsum dolor.</div>
<div class="Target3">Lorem, ipsum.</div> </div>
</body>
</html>
Example
This example uses the flex grow property in CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS flex Property</title>
<style>
.FlexContainer {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.FlexItem {
background-color: blueviolet;
padding: 10px;
border: 5px dashed red;
color: aliceblue;
font-weight: bold;
font-size: 2em;
text-align: center;
}
.Flex1 {
flex: 1 1 20em;
}
.Flex2 {
flex: 2 2 20em;
}
</style>
</head>
<body>
<ul class="FlexContainer">
<li class="FlexItem Flex1">This is an example of using flexbox 1</li>
<li class="FlexItem Flex2">This is an exmaple of using flexbox 2</li>
</ul>
</body>
</html>
Using flex properties for items of the same length
As we can see, we can use flex properties to control the size of flexible elements. Therefore, if we must make all flex items the same length, we will take advantage of this property.
Example
The following example uses the flex property in CSS to create flexbox items of the same length.
<!DOCTYPE html>
<html>
<head>
<style>
center {
margin: 75px;
color: rgb(10, 143, 10);
font-size: 48px;
}
.FlexContainer {
display: flex;
border: dashed 3px black;
width: 500px;
height: 400px;
}
.FlexContainer div {
flex: 1;
}
.FlexItem1 {
background-color: rgb(246, 227, 192);
}
.FlexItem2 {
background-color: rgb(197, 197, 197);
}
.FlexItem3 {
background-color: rgb(198, 224, 224);
}
</style>
</head>
<body>
<center>
<div class="FlexContainer">
<div class="FlexItem1">Lorem, ipsum dolor.</div>
<div class="FlexItem2">Lorem, ipsum dolor.</div>
<div class="FlexItem3">Lorem, ipsum dolor.</div>
</div>
</center>
</body>
</html>
Conclusion
In summary, CSS allows flexible items to be the same length regardless of their content through the use of properties like “width,” “max-width,” and “flex.” This flexibility is extremely useful when designing responsive websites, which need to adjust to different viewing devices. By using these properties, designers can create layouts that look great on any device.