Introduction

In the previous lesson, you learned the basics of Flexbox, including alignment, direction, and spacing. In this advanced guide, we will explore deeper Flexbox concepts that are used in real-world layouts.

These advanced properties help you build more flexible, responsive, and professional designs.

What You’ll Learn

Advanced alignment techniques
Flex item control properties
Ordering elements
Nested Flexbox
Real-world layout patterns

Quick Recap (Short Section)

Flexbox works with:

Flex Container → display: flex;
Flex Items → children inside container

Main concepts:

Main axis
Cross axis
Alignment
Distribution of space

Now let’s go advanced 🚀

🔹 align-content

The align-content property controls spacing between rows when there are multiple lines.

👉 It works only when:

flex-wrap: wrap is used
There are multiple rows

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Values:

flex-start
flex-end
center
space-between
space-around
stretch

👉 Difference from align-items:

align-items → aligns items inside a row
align-content → aligns multiple rows

🔹 order

The order property changes the visual order of flex items without changing HTML.

.box1 {
  order: 2;
}.box2 {
  order: 1;
}

👉 Lower value appears first.

💡 Default value is 0.

🔹 align-self

Overrides align-items for individual items.

.box {
  align-self: flex-end;
}

👉 Useful when one item needs different alignment.

🔹 Flex Shorthand (Deep Understanding)

.box {
  flex: 1;
}

👉 This means:

flex-grow: 1
flex-shrink: 1
flex-basis: 0

More Examples:

.box {
  flex: 2;
}

👉 Takes more space than others.

🔹 Nested Flexbox

Flexbox can be used inside another Flexbox.

.parent {
  display: flex;
}.child {
  display: flex;
  flex-direction: column;
}

👉 Helps create complex layouts.

🔹 Advanced Layout Pattern: Equal Height Columns

Flexbox automatically creates equal height columns.

.container {
  display: flex;
}.box {
  flex: 1;
}

👉 All boxes will have equal height.

🔹 Advanced Layout Pattern: Card Layout

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}.card {
  flex: 1 1 200px;
}

👉 Responsive card layout.

🔹 Advanced Layout Pattern: Sidebar Layout

.layout {
  display: flex;
}.sidebar {
  width: 250px;
}.content {
  flex: 1;
}

👉 Common in dashboards.

🔹 Advanced Layout Pattern: Sticky Footer

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}main {
  flex: 1;
}

👉 Footer stays at bottom.

🔹 Responsive Design with Flexbox

📱 Making Layout Responsive

Flexbox is very useful for responsive design.

.container {
  display: flex;
  flex-wrap: wrap;
}.box {
  flex: 1 1 200px;
}

👉 Items automatically adjust based on screen size.

🔹 When NOT to Use Flexbox

⚠️ Limitations of Flexbox

Not ideal for complex grid layouts
Difficult for full-page design
Limited control over both axes simultaneously

👉 Use Grid instead in such cases.

🔹 Debugging Flexbox

🛠️ Common Debug Tips

Add border to see layout
Check parent has display: flex
Use browser DevTools
Check axis direction

👉 This saves a lot of time.

🔹 Real-World Tips

Use order carefully (SEO still follows HTML order)
Prefer flex shorthand for cleaner code
Combine Flexbox with media queries
Use nested flex for complex layouts

🔹 Common Mistakes

Using align-content without wrap
Misusing order for layout logic
Overcomplicating with nested flex
Forgetting responsiveness

🔹 Best Practices

Keep layout simple
Use Flexbox for 1D layouts
Combine with CSS Grid for complex designs
Use meaningful class names

🔹 Complete Example

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }  .box {
    flex: 1 1 150px;
    height: 100px;
    background: teal;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }  .box:nth-child(1) {
    order: 2;
  }  .box:nth-child(2) {
    order: 1;
  }
</style>
</head>
<body><div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div></body>
</html>

🔹 Practice Tasks:

Task 1

Use flex-wrap and align-content with multiple rows.

Task 2

Change order of items using order.

Task 3

Apply align-self to one item.

Task 4

Create equal width and height boxes using flex.

Task 5

Create a card layout using flex-wrap.

Task 6

Build a sidebar layout.

Task 7

Create a sticky footer using Flexbox.

FAQs

What is align-content?

It controls spacing between rows.

What is order in Flexbox?

It changes visual order of elements.

Can we use Flexbox inside Flexbox?

Yes, it is called nested Flexbox.

Conclusion

CSS Flexbox Advanced concepts help you build professional and responsive layouts. By mastering properties like align-content, order, and flex, you can create real-world UI structures efficiently.

👉 In the next tutorial, you will learn CSS Grid Layout, which is perfect for two-dimensional layouts.