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
CSS Flexbox Layout Module
Even though CSS was designed to handle styling, web developers have always had a special issue when developing remarkable layouts, which nearly always requires the use of JavaScript. But Flexbox is here to make that different.
For getting better understanding on the CSS flexbox layout module, let's dive into the article.
CSS Flexbox
Developers can design adaptable and flexible web page layouts with the help of the flexible property, which is an adaptable command. This property removes the need to define exact dimensions by allowing webpage elements to be sized and positioned relative to one another.
Because it lets items adjust to the size of the screen, the flex property is especially helpful for responsive design. For example, by adjusting the flex-direction property from row to column, one can effortlessly rearrange a row of images on a desktop screen into a column on a mobile device.
Example
Let's look at the following example, where we are going to use the CSS flex direction property.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 20px;
color: #17202A;
background-color: #D5F5E3;
}
.tp {
width: 250px;
height: 100px;
border: 1px solid #8E44AD;
display: flex;
}
.rect {
width: 60px;
height: 30px;
}
#row {
flex-direction: row;
}
.a {
background-color: #DFFF00;
}
.b {
background-color: #40E0D0;
}
.c {
background-color: #D35400;
}
</style>
</head>
<body>
<h2>row flex-direction</h2>
<div id="row" class="tp">
<div class="rect a">X</div>
<div class="rect b">Y</div>
<div class="rect c">Z</div>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the text along with a div box displayed on the webpage.
Example
Considering another scenario, where we are going to use the CSS flex wrap property.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 20px;
color: #DE3163;
background-color: #E8DAEF;
}
.tp div {
height: 40px;
color: #6C3483;
width: 250px;
text-align: center;
}
.x {
background: yellow;
}
.y {
background: lightgray;
}
.z {
background: tomato;
}
.tp {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<h4>CSS flex-wrap:wrap</h4>
<div class="tp">
<div class="x">A</div>
<div class="y">B</div>
<div class="z">C</div>
</div>
</body>
</html>
On running the above code, the output window will pop up displaying the div box on the webpage along with a text.
Example
In the following example, we are going to use the CSS flex grow property.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 15px;
color: #DE3163;
background-color: #D5F5E3;
}
#tp {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.x1 {
flex-grow: 2;
border: 3px solid #A569BD;
}
.x2 {
flex-grow: 3;
border: 3px solid #A569BD;
}
</style>
</head>
<body>
<h3>A,B are flex-grow:2, D and E are flex-grow:3</h3>
<div id="tp">
<div class="x1" style="background-color:yellow;">A</div>
<div class="x1" style="background-color:lightgray;">B</div>
<div class="x2" style="background-color:LightCoral;">D</div>
<div class="x2" style="background-color:#40E0D0;">E</div>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the div box used with flex-grow displayed on the webpage.
190 Views
