Complete Web Designing Course for Beginners

Lesson 4.7 – Flexbox Advanced Layout

🌟 Building Professional and Responsive Layouts Using Advanced Flexbox Properties

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Advanced Flexbox Features

✅ Use Flex Wrap

✅ Use Flex Grow

✅ Use Flex Shrink

✅ Use Flex Basis

✅ Create Responsive Layouts

✅ Build Professional Website Sections

✅ Design Modern Web Interfaces

📖 Introduction

In the previous lesson, we learned:

display:flex;

which places items in a row.

Example:

HTML   CSS   JS

Looks great.

But what happens when:

HTML CSS JS React Bootstrap Python Java

Many items are added?

Without proper Flexbox settings:

HTML CSS JS React Bootstrap Python Java

Everything becomes crowded.

To solve this problem we use:

🚀 Advanced Flexbox Properties

🌟 Advanced Flexbox Properties

Important properties:

✅ flex-wrap

✅ flex-grow

✅ flex-shrink

✅ flex-basis

✅ align-content

🎯 Flex Wrap

By default:

flex-wrap:nowrap;

Meaning:

All items stay on one line.

Example

.container{

display:flex;

flex-wrap:nowrap;

}

Problem

If too many items exist:

HTML CSS JS React Bootstrap Python Java

Items may overflow.

🌟 Wrap Property

flex-wrap:wrap;

Meaning:

Move extra items to next line.

Example

.container{

display:flex;

flex-wrap:wrap;

}

Output

HTML CSS JS

React Bootstrap Python

Java

Why Use Wrap?

Useful for:

✅ Product Cards

✅ Gallery Layouts

✅ Course Cards

✅ Team Sections

🎯 Flex Grow

Controls how much extra space an item should take.

Syntax

flex-grow:value;

Example

.item1{

flex-grow:1;

}

Meaning:

Item grows to fill available space.

Example

HTML

<div class="container">

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

<div>CSS</div>

<div>JS</div>

</div>

CSS

.item1{

flex-grow:1;

}

Result

HTML box becomes larger.

Example

.item1{

flex-grow:2;

}

Meaning:

Takes twice the available space.

Visual Example

HTMLHTMLHTMLHTML

CSS

JS

🎯 Flex Shrink

Controls shrinking when space becomes small.

Syntax

flex-shrink:value;

Example

flex-shrink:1;

Default behavior.

Element shrinks if needed.

Example

flex-shrink:0;

Meaning:

Do not shrink

Example

.box{

width:300px;

flex-shrink:0;

}

Useful for:

✅ Important Buttons

✅ Important Cards

✅ Logos

🎯 Flex Basis

Defines initial size before growing or shrinking.

Syntax

flex-basis:value;

Example

flex-basis:200px;

Meaning:

Initial width = 200px.

Example

.box{

flex-basis:250px;

}

Result

Each item starts with 250px width.

Why Use Flex Basis?

Useful for:

✅ Card Layouts

✅ Product Grids

✅ Service Sections

🎯 Flex Shorthand

Instead of:

flex-grow:1;

flex-shrink:1;

flex-basis:200px;

Use:

flex:1 1 200px;

Meaning:

Grow = 1

Shrink = 1

Basis = 200px

🌟 Align Content

Used when multiple rows exist.

Works with:

flex-wrap:wrap;

Syntax

align-content:value;

Center

align-content:center;

Space Between

align-content:space-between;

Space Around

align-content:space-around;

Example

.container{

display:flex;

flex-wrap:wrap;

align-content:center;

}

🎯 Responsive Card Layout

HTML

<div class="container">

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

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

<div class="card">JavaScript</div>

<div class="card">React</div>

<div class="card">Bootstrap</div>

<div class="card">Python</div>

</div>

CSS

.container{

display:flex;

flex-wrap:wrap;

gap:20px;

}

.card{

flex:1 1 200px;

border:2px solid blue;

padding:20px;

}

Result

Cards automatically adjust according to screen size.

🌟 Building a Service Section

HTML

<div class="services">

<div class="service">

Web Design

</div>

<div class="service">

App Development

</div>

<div class="service">

Digital Marketing

</div>

</div>

CSS

.services{

display:flex;

flex-wrap:wrap;

gap:20px;

}

.service{

flex:1 1 250px;

background-color:lightblue;

padding:20px;

}

Result

Professional service cards.

🎯 Equal Width Columns

CSS

.column{

flex:1;
}

HTML

<div class="column">

HTML

</div>

<div class="column">

CSS

</div>

<div class="column">

JS

</div>

Result

All columns become equal width.

🌟 Complete Example

HTML

<div class="container">

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

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

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

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

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

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

</div>

CSS

.container{

display:flex;

flex-wrap:wrap;

gap:20px;

}

.box{

flex:1 1 200px;

background-color:lightyellow;

border:2px solid orange;

padding:20px;

text-align:center;

}

🎯 Expected Output

Responsive boxes arranged automatically.

Desktop:

HTML CSS JS React Bootstrap Python

Mobile:

HTML

CSS

JS

React

Bootstrap

Python

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<div class="container">

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

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

<div class="card">JavaScript</div>

<div class="card">React</div>

<div class="card">Bootstrap</div>

<div class="card">Python</div>

</div>

</body>

</html>

CSS

.container{

display:flex;

flex-wrap:wrap;

gap:20px;

}

.card{

flex:1 1 200px;

background-color:lightblue;

border:2px solid blue;

padding:20px;

text-align:center;

font-size:20px;

}

🏫 Real World Examples

E-Commerce Products

flex-wrap:wrap;

Team Member Cards

flex:1 1 250px;

Course Cards

gap:20px;

Service Sections

display:flex;

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Flex Wrap

Wrong:

display:flex;

Lots of cards may overflow.

Use:

flex-wrap:wrap;

Mistake 2

Using Fixed Width

Wrong:

width:300px;

Not responsive.

Better:

flex:1 1 250px;

Mistake 3

Using Large Flex Grow Values

Wrong:

flex-grow:10;

May create uneven layouts.

🌟 Best Practices

✅ Use flex-wrap for responsiveness.

✅ Use gap instead of margins.

✅ Use flex-basis for card sizes.

✅ Use flex shorthand.

✅ Test layouts on mobile screens.

🏆 Mini Project – Course Card Section

Create six course cards:

HTML

CSS

JavaScript

React

Bootstrap

Python

Apply:

✅ display:flex

✅ flex-wrap:wrap

✅ gap:20px

✅ flex:1 1 200px

📝 Practical Activity

Create a:

Service Section

Containing:

Web Design
Web Development
App Development
Digital Marketing

Display all cards responsively.

📋 Assignment

Assignment 4.7

What is flex-wrap?
What is flex-grow?
What is flex-shrink?
What is flex-basis?
What is the flex shorthand property?
Create a responsive card layout.
Create a service section using Flexbox.

🧠 Quiz

Q1. Which property moves items to the next line?

A. flex-grow

B. flex-wrap

C. flex-basis

D. flex-shrink

✅ Answer: B

Q2. Which property controls growth?

A. flex-grow

B. flex-wrap

C. gap

D. width

✅ Answer: A

Q3. Which property defines initial size?

A. flex-size

B. flex-grow

C. flex-basis

D. flex-width

✅ Answer: C

Q4. Which shorthand combines grow, shrink, and basis?

A. flex-all

B. flex

C. flex-layout

D. flexbox

✅ Answer: B

Q5. Which property creates spacing between flex items?

A. padding

B. margin

C. gap

D. border

✅ Answer: C

📌 Lesson Summary

✅ Flexbox can create advanced responsive layouts.

✅ flex-wrap moves items to new rows.

✅ flex-grow controls expansion.

✅ flex-shrink controls shrinking.

✅ flex-basis defines initial size.

✅ flex: 1 1 200px is a common professional pattern.

✅ Advanced Flexbox is used in modern websites and applications.