Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
The CSS Flexbox Layout Module provides an efficient way to arrange, distribute, and align items in a container, even when their size is unknown or dynamic.
Syntax
.container {
display: flex;
}
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 1: Flex Direction
The following example demonstrates the CSS flex-direction property ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 20px;
color: #17202A;
background-color: #D5F5E3;
}
.container {
width: 300px;
height: 100px;
border: 2px solid #8E44AD;
display: flex;
flex-direction: row;
}
.item {
width: 80px;
height: 50px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.item1 { background-color: #DFFF00; color: black; }
.item2 { background-color: #40E0D0; }
.item3 { background-color: #D35400; }
</style>
</head>
<body>
<h2>Flex Direction: Row</h2>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
</body>
</html>
Three colored boxes arranged horizontally in a row within a bordered container appear on the webpage.
Example 2: Flex Wrap
The following example demonstrates the CSS flex-wrap property ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 20px;
color: #DE3163;
background-color: #E8DAEF;
}
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
border: 2px solid #8E44AD;
padding: 10px;
}
.flex-item {
height: 60px;
width: 150px;
margin: 5px;
text-align: center;
line-height: 60px;
color: #6C3483;
font-weight: bold;
}
.item-a { background: yellow; }
.item-b { background: lightgray; }
.item-c { background: tomato; }
</style>
</head>
<body>
<h2>Flex Wrap: Wrap</h2>
<div class="flex-container">
<div class="flex-item item-a">Item A</div>
<div class="flex-item item-b">Item B</div>
<div class="flex-item item-c">Item C</div>
</div>
</body>
</html>
Three colored boxes that wrap to the next line when they don't fit in the container width appear on the webpage.
Example 3: Flex Grow
The following example demonstrates the CSS flex-grow property ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 15px;
color: #DE3163;
background-color: #D5F5E3;
}
.flex-container {
display: flex;
width: 600px;
height: 80px;
border: 3px solid #A569BD;
}
.grow-2 {
flex-grow: 2;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 5px;
}
.grow-3 {
flex-grow: 3;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 5px;
}
</style>
</head>
<body>
<h2>Flex Grow: Different Growth Factors</h2>
<div class="flex-container">
<div class="grow-2" style="background-color:yellow;">Grow 2</div>
<div class="grow-2" style="background-color:lightgray;">Grow 2</div>
<div class="grow-3" style="background-color:LightCoral;">Grow 3</div>
<div class="grow-3" style="background-color:#40E0D0;">Grow 3</div>
</div>
</body>
</html>
Four boxes with different growth factors appear, where items with flex-grow: 3 take up more space than items with flex-grow: 2.
Conclusion
CSS Flexbox provides powerful layout capabilities with properties like flex-direction, flex-wrap, and flex-grow. It simplifies responsive design and eliminates the need for complex positioning techniques.
290 Views
