Introduction
CSS Flexbox is a powerful layout system used to design flexible and responsive layouts. It makes it easy to align items, distribute space, and create modern UI designs without using complex positioning or floats.
Flexbox works on a one-dimensional layout (row or column) and is widely used in real-world web development.
What You’ll Learn
- What is Flexbox
- Flex container and flex items
- Main axis and cross axis
- Flexbox properties
- Real-world usage
What is Flexbox?
Flexbox (Flexible Box Layout) is a one-dimensional layout system used to:
- Align items
- Distribute space
- Control layout direction
- Make responsive designs easier
It works on:
- Row (horizontal)
- Column (vertical)
Basic Structure of Flexbox
Flexbox always has:
- Flex Container (parent)
- Flex Items (children)
Example:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.container {
display: flex;
}
👉 Once you add display: flex;, the container becomes a flex container and all children become flex items.
🔹 Important Concept: Main Axis vs Cross Axis
Understanding axes is very important in Flexbox.
If flex-direction: row
- Main axis → horizontal
- Cross axis → vertical
If flex-direction: column
- Main axis → vertical
- Cross axis → horizontal
👉 All alignment properties depend on these axes.
Important Flexbox Properties
🔹 flex-direction
Controls direction of items.
.container {
display: flex;
flex-direction: row; /* default */
}
Values:
- row
- row-reverse
- column
- column-reverse
🔹 justify-content
Aligns items along the main axis.
.container {
justify-content: center;
}
Values:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
👉 Used for horizontal alignment (in row direction).
🔹 align-items
Aligns items along the main axis.
.container {
align-items: center;
}
Values:
- stretch
- flex-start
- flex-end
- center
- baseline
👉 Used for vertical alignment (in row direction).
🔹 flex-wrap
Controls whether items move to the next line.
.container {
flex-wrap: wrap;
}
👉 Prevents overflow when items don’t fit in one line.
🔹 gap
Adds space between items.
.container {
display: flex;
gap: 20px;
}
👉 Cleaner and better than using margins.
Practical Example (Very Important)
Centering Content Perfectly
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
👉 This centers content both horizontally and vertically.
Used in:
- Hero sections
- Login forms
- Cards
- Landing pages
🔹 Flex Item Properties (Advanced Basics)
🔸 flex-grow
Defines how much space an item should take.
.box {
flex-grow: 1;
}
👉 Items expand equally.
🔸 flex-shrink
.box {
flex-shrink: 0;
}
👉 Prevents shrinking.
🔸 flex-basis
.box {
flex-basis: 100px;
}
👉 Sets initial size before spacing is distributed.
🔸 flex (Shorthand)
.box {
flex: 1;
}
👉 Combines grow, shrink, and basis.
Real Use Case for Your Website
You can use Flexbox for:
- Navigation bar
- Cards layout
- Footer columns
- Blog post grids
- About page sections
Example for navbar:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
👉 This is used in almost every website.
🔹 Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
🔹 Common Mistakes
- Forgetting
display: flex - Confusing
justify-contentandalign-items - Not using
flex-wrap - Overusing fixed widths
🔹 Best Practices
- Use Flexbox for alignment and layout
- Keep layouts simple
- Use
gapinstead of margins - Combine with responsive design
🔹 Practice Tasks:
Task 1: Create a Flex Container
Create a container with 3 boxes and apply display: flex.
👉 Output should show items in a row.
Task 2: Change Direction
Use flex-direction: column.
👉 Items should appear vertically.
Task 3: Center Items
Center all items horizontally and vertically using:
justify-contentalign-items
Task 4: Add Spacing
Add space between items using gap.
👉 Try different values like 10px, 20px.
Task 5: Use justify-content
Apply different values:
centerspace-betweenspace-around
👉 Observe alignment changes.
Task 6: Use align-items
Try:
flex-startcenterflex-end
👉 See vertical alignment differences.
Task 7: Enable Wrapping
Use flex-wrap: wrap.
👉 Reduce screen width and observe behavior.
Task 8: Create a Navbar
Create a simple navbar using Flexbox.
👉 Use:
justify-content: space-betweenalign-items: center
Task 9: Equal Width Boxes
Use flex: 1 on all items.
👉 All boxes should have equal width.
Task 10: Center a Box in Page
Create a full-height container and center a box using Flexbox.
👉 Use:
height: 100vhjustify-contentalign-items
Conclusion
CSS Flexbox is an essential layout tool for modern web development. By understanding how flex containers and items work, along with alignment properties, you can build responsive and clean layouts easily.
👉 In the next tutorial, you will learn CSS Flexbox – Advanced, which is used for more complex designs.