What is Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout model that helps you
arrange items in a row or column easily, and control their alignment,
spacing, and order — without using floats or complex positioning.
When you set:
display: flex;
on a container, all its direct child elements become flex items.
Basic Syntax
.container {
display: flex;
}
Now the children inside .container will align horizontally (in a
row) by default.
Flexbox Main Concepts
There are two axes:
Axis Type Direction Controls
Main Axis Default: left → right justify-content
Cross Axis Default: top → bottom align-items
You can switch them using flex-direction.
Flexbox Properties
1. display
display: flex; /* Block-level flex
container */
display: inline-flex; /* Inline-level flex
container */
2. flex-direction
Controls main axis direction.
.container {
flex-direction: row; /* default: left
to right */
flex-direction: row-reverse; /* right to left
*/
flex-direction: column; /* top to bottom
*/
flex-direction: column-reverse; /* bottom to
top */
}
Example:
<div class="container">
<div>1</div><div>2</div><div>3</div>
</div>
.container {
display: flex;
flex-direction: row; /* try changing this to
column */
}
3. justify-content
Controls how items are placed along the main axis (horizontal by
default).
Value Meaning
flex-start items start from the left
flex-end items end at the right
center items centered
space-between equal space between items
space-around equal space around items
space-evenly equal space between and around
Example:
.container {
display: flex;
justify-content: space-between;
}
4. align-items
Controls alignment along the cross axis (vertical by default).
Value Meaning
stretch (default) items stretch to fill height
flex-start align top
flex-end align bottom
center vertically center
baseline align text baselines
Example:
.container {
display: flex;
align-items: center;
}
5. align-content
Used when you have multiple rows (like wrapping). It controls spacing
between rows.
Example:
.container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
6. flex-wrap
Makes items wrap to the next line if there’s not enough space.
.container {
display: flex;
flex-wrap: wrap; /* or nowrap (default), wrap-
reverse */
}
7. gap
Adds space between flex items (no need for margins!).
.container {
display: flex;
gap: 10px;
}
Flex Properties on Children
Each child (flex item) can have its own flexibility.
Property Description
flex-grow how much an item can grow
flex-shrink how much it can shrink
flex-basis initial size before growing/shrinking
Shorthand:
flex: flex-grow flex-shrink flex-basis;
Example:
.item1 { flex: 1; } /* takes available space
equally */
.item2 { flex: 2; } /* takes double the space
of item1 */
8. align-self
Allows a single item to override the container’s align-items.
.item1 {
align-self: flex-end;
}
Example: Centering a Box
<div class="container">
<div class="box">Center Me</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: lightgray;
}
.box {
background: teal;
color: white;
padding: 20px;
}
Result: The box is perfectly centered horizontally and vertically!
Flexbox Visualizer Tools (for practice)
You can explore live:
[Link]
[Link] best
reference guide
Just copy this code and run it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Flexbox Practical Examples</title>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background: #f2f2f2;
margin: 0;
padding: 20px;
}
h2 {
background: #444;
color: white;
padding: 10px;
text-align: center;
border-radius: 6px;
margin-top: 40px;
}
.container {
background: white;
border: 2px solid #ccc;
margin: 20px auto;
padding: 15px;
display: flex;
gap: 10px;
height: 200px;
}
.item {
background: #00bcd4;
color: white;
font-size: 18px;
padding: 15px;
text-align: center;
border-radius: 6px;
flex: 1;
}
/* 1 Flex Direction */
.direction-row { flex-direction: row; }
.direction-column { flex-direction: column; }
/* 2 Justify Content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
/* 3 Align Items */
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
/* 4 Wrap Example */
.wrap {
flex-wrap: wrap;
height: auto;
}
/* 5Gap Example */
.gap {
gap: 20px;
}
/* 6 Individual Flex Grow */
.grow .item:nth-child(1) { flex: 1; }
.grow .item:nth-child(2) { flex: 2; }
.grow .item:nth-child(3) { flex: 3; }
/* Align Self Example */
.self .item:nth-child(1) { align-self: flex-start; }
.self .item:nth-child(2) { align-self: center; }
.self .item:nth-child(3) { align-self: flex-end; }
/* Styling for small items in wrap example */
.wrap .item {
width: 100px;
}
</style>
</head>
<body>
<h1 style="text-align:center;">CSS Flexbox Practical
Examples</h1>
<!-- Flex Direction -->
<h2> flex-direction: row</h2>
<div class="container direction-row">
<div class="item">1</div><div class="item">2</div><div
class="item">3</div>
</div>
<h2> flex-direction: column</h2>
<div class="container direction-column">
<div class="item">A</div><div class="item">B</div><div
class="item">C</div>
</div>
<!-- Justify Content -->
<h2> justify-content examples</h2>
<div class="container justify-start"><div
class="item">Start</div><div class="item">Start</div></div>
<div class="container justify-center"><div
class="item">Center</div><div
class="item">Center</div></div>
<div class="container justify-end"><div
class="item">End</div><div class="item">End</div></div>
<div class="container justify-between"><div
class="item">Between</div><div
class="item">Between</div></div>
<div class="container justify-around"><div
class="item">Around</div><div
class="item">Around</div></div>
<div class="container justify-evenly"><div
class="item">Evenly</div><div
class="item">Evenly</div></div>
<!-- Align Items -->
<h2>align-items examples</h2>
<div class="container align-start"><div class="item"
style="height:40px;">Top</div><div class="item"
style="height:100px;">Tall</div></div>
<div class="container align-center"><div class="item"
style="height:40px;">Center</div><div class="item"
style="height:100px;">Center</div></div>
<div class="container align-end"><div class="item"
style="height:40px;">Bottom</div><div class="item"
style="height:100px;">Bottom</div></div>
<div class="container align-stretch"><div
class="item">Stretch</div><div
class="item">Stretch</div></div>
<!-- Flex Wrap -->
<h2> flex-wrap example</h2>
<div class="container wrap">
<div class="item">1</div><div class="item">2</div><div
class="item">3</div>
<div class="item">4</div><div class="item">5</div><div
class="item">6</div>
<div class="item">7</div><div class="item">8</div><div
class="item">9</div>
</div>
<!-- Gap Example -->
<h2>5 gap example</h2>
<div class="container gap">
<div class="item">Gap 1</div><div class="item">Gap
2</div><div class="item">Gap 3</div>
</div>
<!-- Flex Grow -->
<h2>flex-grow example</h2>
<div class="container grow">
<div class="item">1x</div><div class="item">2x</div><div
class="item">3x</div>
</div>
<h2>align-self example</h2>
<div class="container self">
<div class="item">Top</div><div
class="item">Center</div><div class="item">Bottom</div>
</div>
</body>
</html>