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.