CSS Flexbox Introduction

Master modern CSS layout with Flexbox

🎯 What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a modern layout method that makes it easy to arrange elements in rows or columns. It's perfect for creating responsive designs and aligning content. 


/* Simple flexbox container */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Visual Result:

Centered Content

Why Use Flexbox?

📐

Easy Alignment

Center content horizontally and vertically with ease 

display: flex;
align-items: center;
📱

Responsive Design

Elements automatically adjust to screen size 

flex-wrap: wrap;
flex: 1;
🔄

Flexible Sizing

Items grow and shrink based on available space 

flex-grow: 1;
flex-shrink: 1;
🎨

Clean Code

Less CSS needed compared to older methods 

justify-content: space-between;

🔹 Before vs After Flexbox

Before Flexbox, layouts used floats, tables, or absolute positioning—hacks lacking true flexibility. These methods required clearfixes, suffered from collapsing margins, and made vertical centering difficult. After Flexbox, a dedicated layout model simplified space distribution and alignment. Tasks like centering and equal-height columns became trivial, improving code semantics, reducing markup, and enhancing responsive design.

🔸 Old Way (Without Flexbox) 

/* Centering content the old way */
.old-center {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

🔸 Modern Way (With Flexbox) 

/* Centering content with flexbox */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Output:

Much Easier!

🔹 Basic Flexbox Example

A simple navigation bar demonstrates Flexbox’s power for flexible, aligned interfaces. Container: display: flex;. Logo: margin-right: auto; pushes links right. Links: display: flex; gap: 1rem;. align-items: center vertically centers items. Creates a clean, responsive navbar with minimal code. On small screens, flex-wrap or flex-direction: column stacks items, showcasing Flexbox’s core strengths. 

<!-- HTML -->
<nav class="navbar">
    <div class="logo">MyWebsite</div>
    <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
</nav>
/* CSS */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #333;
    color: white;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

Output:

🔹 Flexbox Terminology

Key Flexbox terms: container, items, main axis, cross axis, main start/end, cross start/end. The flex container (display: flex) establishes the context. Direct children are flex items. The main axis is set by flex-direction; the cross axis is perpendicular. justify-content works on the main axis; align-items on the cross. Understanding these terms clarifies property interactions for precise layout control.

Essential Terms:

  • Flex Container: The parent element with display: flex
  • Flex Items: The child elements inside the flex container
  • Main Axis: The primary direction (horizontal by default)
  • Cross Axis: The perpendicular direction (vertical by default) 
/* Container becomes flex container */
.container {
    display: flex; /* Creates flex container */
}

/* Children become flex items automatically */
.item {
    flex: 1; /* Each item takes equal space */
}

🧠 Test Your Knowledge

Which CSS property creates a flex container?