Lesson 4.6 – Flexbox Basics

🚀 Creating Modern Layouts Using CSS Flexbox

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Flexbox

✅ Create Flexible Layouts

✅ Align Elements Horizontally

✅ Align Elements Vertically

✅ Use Flex Container

✅ Use Flex Items

✅ Create Responsive Layouts

✅ Build Modern Website Designs

📖 Introduction

Imagine creating three boxes.

Without Flexbox:

 
+-------+
| HTML  |
+-------+

+-------+
| CSS   |
+-------+

+-------+
| JS    |
+-------+
 

Boxes appear one below another.

But modern websites display them like:

 
+-------+ +-------+ +-------+
| HTML  | | CSS   | | JS    |
+-------+ +-------+ +-------+
 

Everything is aligned perfectly.

This is done using:

📦 CSS Flexbox

🤔 What is Flexbox?

Flexbox stands for:

Flexible Box Layout

It is a CSS layout system used to arrange elements easily.

🌟 Why Use Flexbox?

Before Flexbox:

❌ Complex layouts

❌ Difficult alignment

❌ Lots of CSS code

With Flexbox:

✅ Easy alignment

✅ Responsive layouts

✅ Less code

✅ Professional design

🎯 Real World Uses

Flexbox is used in:

✅ Navigation Bars

✅ Profile Cards

✅ Product Cards

✅ Login Forms

✅ Landing Pages

✅ Dashboards

🌟 Flexbox Concepts

Flexbox has two parts:

1. Flex Container

Parent element

2. Flex Items

Child elements

Example

HTML

<div class="container">

<div>HTML</div>

<div>CSS</div>

<div>JavaScript</div>

</div>

Here:

<div class="container">

is the Flex Container.

These are Flex Items:

<div>HTML</div>

<div>CSS</div>

<div>JavaScript</div>

🎯 Creating a Flex Container

Use:

display:flex;

CSS

.container{

display:flex;

}

Result

Items appear side by side.

Output

 
HTML   CSS   JavaScript
 

🌟 First Flexbox Example

HTML

<div class="container">

<div class="box">HTML</div>

<div class="box">CSS</div>

<div class="box">JS</div>

</div>
 

CSS

.container{

display:flex;

}

.box{

width:100px;

height:100px;

border:2px solid blue;

margin:10px;

}

Output

Three boxes appear in one row.

🎯 Flex Direction

Controls layout direction.

Syntax

flex-direction:value;

Row Direction

Default.

flex-direction:row;

Output

 
HTML   CSS   JS
 

Column Direction

flex-direction:column;

Output

 
HTML

CSS

JS
 

Example

.container{

display:flex;

flex-direction:column;

}

🌟 Justify Content

Controls horizontal alignment.

Syntax

justify-content:value;

Center

 

Output

justify-content:center;

Items move to center.

Example

.container{

display:flex;

justify-content:center;

}

Output

 
      HTML CSS JS
 

Space Between

justify-content:space-between;

Output

 
HTML         CSS         JS
 

Space Around

justify-content:space-around;

Output

 
 HTML     CSS     JS
 

Space Evenly

justify-content:space-evenly;

Output

 
  HTML    CSS    JS
 

Equal spacing.

🌟 Align Items

Controls vertical alignment.

Syntax

align-items:value;

Center

align-items:center;

Example

.container{

display:flex;

height:300px;

align-items:center;

}

Result

Items appear vertically centered.

Start

align-items:flex-start;

Top alignment.

End

align-items:flex-end;

Bottom alignment.

🎯 Visual Example

Without Alignment

 
+-------------------+

HTML

CSS

JS

+-------------------+
 

With Center Alignment

 
+-------------------+

      HTML

      CSS

      JS

+-------------------+
 

🌟 Combining Justify and Align

Example

.container{

display:flex;

justify-content:center;

align-items:center;

height:300px;

}

Result

Perfect center alignment.

🌟 Flex Container Styling

Example

.container{

display:flex;

background-color:lightgray;

padding:20px;

}

Result

Styled flex layout.

🌟 Complete Example

HTML

 

CSS

.container{

display:flex;

justify-content:center;

}

.box{

width:120px;

height:120px;

background-color:lightblue;

border:2px solid blue;

margin:10px;

text-align:center;

}

Output

Three centered boxes.

🎯 Creating Navigation Menu

HTML

<nav class="menu">

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Courses</a>

<a href="#">Contact</a>

</nav>

CSS

.menu{

display:flex;

justify-content:center;

gap:20px;

}

Output

 
Home   About   Courses   Contact
 

🌟 What is Gap?

Flexbox provides:

gap:value;

Example

gap:20px;

Result

20px spacing between items.

Example

.container{

display:flex;

gap:15px;

}

🎯 Flexbox vs Traditional Layout

Traditional Layout:

❌ Difficult alignment

❌ More code

Flexbox:

✅ Easy alignment

✅ Responsive

✅ Modern

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<div class="box">HTML</div>

<div class="box">CSS</div>

<div class="box">JS</div>

</div>

</body>

</html>

CSS

.container{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

height:300px;

}

.box{

width:120px;

height:120px;

background-color:lightyellow;

border:2px solid orange;

text-align:center;

font-size:20px;

padding-top:40px;

}

🎯 Expected Output

Three attractive boxes:

 
HTML   CSS   JS
 

Centered horizontally and vertically.

🏫 Real World Examples

Navigation Bar

display:flex;

Product Cards

display:flex;

Team Member Section

display:flex;

Service Boxes

 

⚠️ Common Beginner Mistakes

Mistake 1

Applying Flexbox to Child

Wrong:

.box{

display:flex;
}
 

Usually Flexbox should be applied to parent container.

Mistake 2

Forgetting Height

align-items:center;

needs container height.

Mistake 3

Using Too Much Margin

Use:

 
gap
 

instead.

🌟 Best Practices

✅ Apply flex to parent.

✅ Use gap for spacing.

✅ Use justify-content for horizontal alignment.

✅ Use align-items for vertical alignment.

✅ Use Flexbox for modern layouts.

🏆 Mini Project – Course Cards

Create:

 
HTML

CSS

JavaScript

Bootstrap
 

Cards.

Apply:

✅ display:flex

✅ gap:20px

✅ center alignment

✅ borders

✅ colors

📝 Practical Activity

Create a navigation menu:

 
Home

About

Courses

Contact
 

using Flexbox.

Create four boxes:

 
HTML

CSS

JS

React
 

Display them in one row.

📋 Assignment

Assignment 4.6

  1. What is Flexbox?
  2. What is a Flex Container?
  3. What are Flex Items?
  4. What does display:flex do?
  5. What is justify-content?
  6. What is align-items?
  7. Create a navigation menu using Flexbox.

🧠 Quiz

Q1. Which property enables Flexbox?

A. flex

B. display:flex

C. box:flex

D. layout:flex

✅ Answer: B

Q2. Which property controls horizontal alignment?

A. align-items

B. justify-content

C. flex-direction

D. gap

✅ Answer: B

Q3. Which property controls vertical alignment?

A. align-items

B. justify-content

C. display

D. gap

✅ Answer: A

Q4. Which property controls spacing between flex items?

A. margin

B. padding

C. gap

D. border

✅ Answer: C

Q5. Which direction is default in Flexbox?

A. column

B. vertical

C. row

D. center

✅ Answer: C

📌 Lesson Summary

✅ Flexbox is a modern layout system.

✅ display:flex creates a flex container.

✅ Flex items are arranged inside the container.

✅ flex-direction controls layout direction.

✅ justify-content controls horizontal alignment.

✅ align-items controls vertical alignment.

✅ gap creates spacing between items.

✅ Flexbox is widely used in modern websites.

PreviousNext