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 flexible items can be of the same length regardless of its content in CSS?
Let us try to understand the flex property. Flex is a shorthand property that sets the condition for length of flex element, whether it will be allowed to adjust itself based on the amount of content it has or the viewport width.
Flex Properties
The constituent properties of flex property are specified below −
Flex-grow
This property sets the space that will be assigned to the item out of all the space that is remaining in the flex-container. In other words, it sets whether the main size of the item will be allowed to grow beyond or not. The value for this property is an integer.
The amount of empty space is equal to the size of the flex container less the sum of the sizes of all the flex elements. All sibling items will receive the same amount of residual space, if they all have the same flex grow factor; otherwise, it will be distributed according to the ratio set by the various flex grow factors
The initial value for this property is 0. It applies to all the items in the flexbox, also including the pseudo elements. It is not inheritable by nature and has a number as its animation-type.
Flex-shrink
Just as the flex-grow property allows the flexbox to grow, this property allows the flexitems to shrink in case the content is not able to fit into the space specified.
The initial value for this property is 1 as opposed to 0. It also gets applied to all the items in the flexbox, also including the pseudo elements. Just like flex-grow this property is also not inheritable by nature and has a number as its animation-type.
Flex-basis
This property is used to specify what is the main size of the container will be initially. Unless otherwise specified with box-sizing, it determines the size of the content box.
It can have two possible values. The first being “content”, which will change based on the amount of content and the second value is a width value which will be an absolute value or a percentage. You can also use auto keyword as the width.
Using the flex property
As already discussed, flex is a shorthand property. This is why we can use flex property by specifying either one, two or all three values.
When you specify only one property value, it can either a valid value for flex-grow / flex-basis or a global keyword value.
When using two values, the first value will be taken as the value for flex-grow, and the value after that will be for flex-shrink or flex-basis.
When using three values, the first will be for flex-grow, the second will be used as the value for flex-shrink and the last value will be for flex-basis.
Example
An example of using the flex property in CSS is given below.
<!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 property for same length items
As we saw that we can control the size of the flexible elements using the flex property. So if we have to make all the flex items to be of the same length we will be making use of this property.
Example
The below example uses the flex property to create same length flexbox items using the flex property in CSS.
<!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 conclusion, CSS allows for flexible items to be of the same length regardless of its content by using a number of properties such as 'width', 'max-width' and 'flex'. This flexibility is extremely useful when designing responsive websites that need to adjust in size depending on the device it's being viewed on. By using these properties, designers can create layouts that look great no matter what device they are being viewed on.
210 Views
