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
Advance CSS layout with flexbox
CSS Flexbox is a powerful layout mode that provides an efficient way to arrange, distribute, and align elements within a container. It solves common layout challenges like centering content, creating equal-height columns, and building responsive designs with minimal code.
Syntax
/* Create a flex container */
.container {
display: flex;
}
/* Flex container properties */
.container {
flex-direction: row | column;
flex-wrap: nowrap | wrap;
justify-content: flex-start | center | space-between;
align-items: stretch | center | flex-start | flex-end;
}
Key Flexbox Properties
The flex container has the following essential properties −
flex-direction− Sets the main axis direction (row or column)flex-wrap− Controls whether items wrap to new linesjustify-content− Aligns items along the main axisalign-items− Aligns items along the cross axisalign-content− Aligns wrapped lines
Example: Basic Flexbox Layout
Here's a comprehensive example showing different flexbox layouts −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.main-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-around;
background-color: #f0f8ff;
padding: 20px;
border-radius: 10px;
}
.flex-example {
display: flex;
width: 200px;
height: 120px;
border: 2px solid #333;
border-radius: 8px;
margin-bottom: 10px;
}
.horizontal {
flex-direction: row;
justify-content: space-evenly;
background-color: #ff6b6b;
}
.centered {
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #4ecdc4;
}
.vertical {
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #ffa726;
}
.flex-item {
background-color: white;
padding: 10px;
margin: 5px;
border-radius: 4px;
font-weight: bold;
min-width: 30px;
text-align: center;
}
</style>
</head>
<body>
<h2>Advanced CSS Flexbox Layouts</h2>
<div class="main-container">
<div>
<h4>Horizontal Layout</h4>
<div class="flex-example horizontal">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</div>
<div>
<h4>Centered Layout</h4>
<div class="flex-example centered">
<div class="flex-item">Center</div>
</div>
</div>
<div>
<h4>Vertical Layout</h4>
<div class="flex-example vertical">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
</div>
</div>
</div>
</body>
</html>
Three different flexbox layout examples are displayed: 1. Horizontal Layout - Red container with three items (1, 2, 3) evenly spaced horizontally 2. Centered Layout - Teal container with one centered item labeled "Center" 3. Vertical Layout - Orange container with three items (A, B, C) arranged vertically All containers have rounded corners and are arranged in a responsive grid with a light blue background.
Key Flexbox Benefits
Easy Centering: Perfect horizontal and vertical centering with minimal CSS
Responsive Design: Items automatically adjust to container size
Equal Heights: Flex items naturally have equal height by default
Space Distribution: Intelligent spacing between and around items
Conclusion
Flexbox revolutionizes CSS layout by providing intuitive tools for alignment, distribution, and responsive design. Master these properties to create modern, flexible layouts with minimal code complexity.
730 Views
