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
What is CSS Flexbox?
CSS flexbox is a powerful layout model that makes it easier to design flexible and responsive layouts. It allows you to arrange child items efficiently within a container and automatically adjusts item dimensions when content overflows.
Syntax
selector {
display: flex;
}
Terminology of CSS Flexbox
Understanding these key terms is essential for working with flexbox
Flex container An HTML element with
display: flexapplied to it.Flex items Direct children of the flex container that are arranged using flexbox properties.
Main axis The primary axis along which flex items are arranged (horizontal by default).
Cross axis The perpendicular axis to the main axis (vertical by default).
Main size The size of a flex item along the main axis.
Cross size The size of a flex item along the cross axis.
Key Flexbox Properties
Here are the essential CSS properties for controlling flexbox layout
| Property | Values | Description |
|---|---|---|
display |
flex | Creates a flex container |
flex-direction |
row | row-reverse | column | column-reverse | Sets the direction of the main axis |
justify-content |
flex-start | flex-end | center | space-between | space-around | space-evenly | Aligns items along the main axis |
align-items |
stretch | baseline | center | flex-start | flex-end | Aligns items along the cross axis |
flex-wrap |
nowrap | wrap | wrap-reverse | Controls whether items wrap to new lines |
flex |
flex-grow flex-shrink flex-basis | Shorthand for item growth, shrink, and basis |
Example 1: Flex Direction
This example demonstrates how flex-direction changes the arrangement of flex items
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 200px;
height: 100px;
background-color: #3498db;
margin: 10px;
padding: 10px;
}
.item {
width: 40px;
height: 40px;
background-color: #e74c3c;
margin: 5px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.row { flex-direction: row; }
.column { flex-direction: column; }
</style>
</head>
<body>
<h3>Row Direction</h3>
<div class="container row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>Column Direction</h3>
<div class="container column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Two blue containers appear: the first shows three red numbered boxes arranged horizontally in a row, and the second shows the same boxes arranged vertically in a column.
Example 2: Justify Content
This example shows different ways to align items along the main axis using justify-content
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 300px;
height: 60px;
background-color: #2ecc71;
margin: 10px;
padding: 10px;
}
.item {
width: 50px;
height: 40px;
background-color: #f39c12;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.start { justify-content: flex-start; }
.center { justify-content: center; }
.space-between { justify-content: space-between; }
</style>
</head>
<body>
<h3>flex-start</h3>
<div class="container start">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
<h3>center</h3>
<div class="container center">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
<h3>space-between</h3>
<div class="container space-between">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</body>
</html>
Three green containers display orange boxes labeled A, B, C: first container shows boxes aligned to the left, second shows them centered, and third shows them with equal space between each box.
Conclusion
CSS flexbox provides an efficient way to create flexible layouts with proper alignment and spacing. It simplifies responsive design by automatically adjusting item sizes and positions based on available space.
191 Views
