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 the size of specific flex-item using CSS?
In CSS, we can create our own flexbox using some flex properties provided by the CSS. The CSS flexbox is used to create the responsive layout for the mobile and other small screen devices to arrange the layout by adjusting their sizes for those screen sizes. To create a flexbox for the web page to manage items and their sizes, we are allowed to use the display: flex; property and then we can use the flex properties which are associated with this property to arrange the items according to the striking device width.
Let us now discuss and understand the display flex and all other properties associated with it to manage the items on the web page.
Below are the properties that can be used with the flex property to create a flexbox and arranging the flex items and set their sizes −
order − This property can be used to set the order of the flex items from their default order to the order in which you want to display them.
Syntax
order: numeric_value; // It takes numeric value to set the order.
flex-grow − The flex-grow property can be used to set the extra positive space to which a flex item can grow relative to the other items.
Syntax
flex-grow: numeric_value;
flex-shrink − flex-shrink is a property that can be used to set the negative space to which the flex item can reduce its width or shrink itself with respect to other items.
Syntax
flex-shrink: numeric_value;
flex-basis − This property is used to set the width of the flex item initially for any item.
Syntax
flex-basis: numeric_value; // Takes numeric value in pixels to set initial width of the flex item.
flex − The flex property is a shorthand property to use the above three properties such that flex-grow, flex-shrink and flex-basis. You can use this property with three different values for each one of these properties. The first value will represent the flex-grow, second will represent flex shrink and the third value will represents the flex-basis property value.
Syntax
flex: value value value;
Let us now understand the above properties in details by practically implementing them with the help of code example.
In the first code example, we are going to see the use of the order property to change the order of the flex items.
Steps
Step 1 − In the first step, we will define a parent element which holds the display flex property with a class associated with it.
Step 2 − In this step, we will define the inner child elements whose order will be changed using the order property in CSS.
Step 3 − In the final step, we will grab all these elements using their classes and change their order.
Example
The below example will explain the use of the order property and arrange the flex items in the order you want them to appear −
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
.main-container {
display: flex;
border: 2px solid red;
flex-wrap: wrap;
justify-content: center;
}
.inner-div {
border: 1px solid green;
padding: 5px;
margin: 2px;
width: 16%;
}
.inner-div1 {
order: 3;
}
.inner-div2 {
order: 5;
}
.inner-div3 {
order: 2;
}
.inner-div4 {
order: 1;
}
.inner-div5 {
order: 4;
}
</style>
</head>
<body>
<center>
<h2>Setting the size of specific flex-item using CSS</h2>
<p>The flexible div elements of the below flexbox container are ordered using the order property of CSS.</p>
<div class = "main-container">
<div class = "inner-div inner-div1"> This is the 1st flexible div element set to 3rd position using the order property. </div>
<div class = "inner-div inner-div2"> This is the 2nd flexible div element set to 5th position using the order property. </div>
<div class = "inner-div inner-div3"> This is the 3rd flexible div element set to 2nd position using the order property. </div>
<div class = "inner-div inner-div4"> This is the 4th flexible div element set to 1st position using the order property. </div>
<div class = "inner-div inner-div5"> This is the 5th flexible div element set to 4th position using the order property. </div>
</div>
</center>
</body>
</html>
In this code example, we have used the order property to set the different order of the flex items in which they will normally appear. We have set the order of the all items which is different from their default order.
Let us discuss one more code example in which we will see the use of the shorthand flex property and all other flex-grow, flex-shrink and flex-basis three properties.
Approach
The approach of above example and this example is almost same. You just need to add one more parent div with child elements and use the flex property and other three properties on child elements of these elements.
Example
The below example will help you understand the changes in the above algorithm and the use of three properties individually and the shorthand property as well −
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
display: flex;
border: 2px solid red;
flex-wrap: wrap;
justify-content: center;
}
.inner-div {
border: 1px solid green;
padding: 5px;
margin: 2px;
width: 16%;
}
.inner-div11 {
flex-grow: 2;
}
.inner-div12 {
flex-shrink: 1;
}
.inner-div13 {
flex-basis: 250px;
}
.inner-div21 {
flex: 2 5 200px;
}
.inner-div22 {
flex: 5 3 300px;
}
.inner-div23 {
flex: 3 3 150px;
}
</style>
</head>
<body>
<center>
<h2>Setting the size of specific flex-item using CSS</h2>
<p>The below flex items arranged using the flex-grow, flex-shrink and flex-basis property individually.</p>
<div class = "main-container">
<div class = "inner-div inner-div11"> This flex item uses the flex grow property to grow itself relative to other elements. </div>
<div class = "inner-div inner-div12"> This flex item uses the flex shrink property to shrink itself relative to other elements. </div>
<div class = "inner-div inner-div13"> This flex item uses the flex basis property to set its initial width. </div>
</div>
<p>The below flex items arranged using the flex property.</p>
<div class = "main-container">
<div class = "inner-div inner-div21"> This flex item contains the flex property with flex: 2 5 200px; these values. </div>
<div class = "inner-div inner-div22"> This flex item contains the flex property with flex: 5 3 300px; these values. </div>
<div class = "inner-div inner-div23"> This flex item contains the flex property with flex: 3 3 150px; these values. </div>
</div>
</center>
</body>
</html>
In the above example, we have used the different CSS properties of flexbox to arrange the flex items in a particular order for different screen devices. We have used the flex-grow, flex-shrink and flex-basis properties individually with the child elements of the first div. While, we used the flex property to arrange the children of the second div element.
Conclusion
In this article, we have learned about setting the sizes of the different flex items on different screen devices. We have discussed about different CSS flex properties to achieve the task and understand them with the help of code examples for each one of them. In the first code example, we understand the use of the order property. While, in the second example, we discussed the four different CSS properties in details.
58 Views
