Day 17 : CSS Flexbox (Deep Dive)

on

🧱 Day 17 — Flexbox: One-Dimensional Layouts

Hi guys, Welcome to Day 17! 💪 In Today's class, we enter the modern era of layout design — **Flexbox (Flexible Box Layout)**. It simplifies alignment, distribution, and space between elements — all without using float or positioning hacks. Once you master Flexbox, you’ll never go back to old layout techniques.

📘 1️⃣ What is Flexbox?

Flexbox is a one-dimensional layout model that helps you align and distribute elements in a container — either in a row or column. The parent element becomes a **flex container**, and its children are **flex items**.

🧩 2️⃣ Basic Flexbox Structure

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>
CSS: 
.container {
  display: flex;
  background: #ffcdd2;
  padding: 10px;
}
.container div {
  background: #c62828;
  color: white;
  padding: 20px;
  margin: 5px;
}

🧭 3️⃣ Flex Direction

Controls the main axis — row or column layout.

.container {
  display: flex;
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

🎯 4️⃣ Justify Content (Main Axis)

Aligns items along the main axis (horizontal if flex-direction: row). 

.container {
  justify-content: space-between; /* center | space-around | space-evenly */
}

🧩 5️⃣ Align Items (Cross Axis)

Aligns items vertically (if in row direction). 

.container {
  align-items: center; /* flex-start | flex-end | stretch */
}

🧱 6️⃣ Flex Wrap

Allows items to wrap onto multiple lines instead of squishing. 

.container {
  flex-wrap: wrap;
}

📦 7️⃣ Align Content

Used when there are multiple rows — controls spacing between them. 

.container {
  align-content: space-around;
}

📏 8️⃣ The flex Property (Shorthand)

The flex shorthand defines how an item grows, shrinks, and its base width. 

.item {
  flex: 1; /* flex-grow flex-shrink flex-basis */
}

🧠 9️⃣ Practice Task

  1. Create a navigation bar using Flexbox with space-between alignment.
  2. Make three equal-width boxes using flex:1.
  3. Test different justify-content and align-items values.

🧮 Mini Quiz

  • Q1: What property turns an element into a Flexbox?
  • Q2: Which property controls horizontal alignment?
  • Q3: How do you make Flexbox items wrap?

🎯 Summary

Flexbox revolutionized web layouts. It gives precise control over alignment, spacing, and responsiveness without complexity. Next, we’ll explore **CSS Grid**, a two-dimensional layout system perfect for dashboards and complex layouts.

Comments

Post a Comment