Flexbox Layout Demo - Web Development Course

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout method that provides an efficient way to distribute space among items in a container, even when their size is unknown or dynamic.

Flex Direction

Controls the direction of flex items:

Row (Default)

Item 1

Item 2

Item 3

HTML

<div class="flex-container flex-row">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Flex Direction: Row */
.flex-row { display: flex; flex-direction: row; }

Row Reverse

Item 1

Item 2

Item 3

HTML

<div class="flex-container flex-row-reverse">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Flex Direction: Row Reverse */
.flex-row-reverse { display: flex; flex-direction: row-reverse; }

Column

Item 1

Item 2

Item 3

HTML

<div class="flex-container flex-column">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Flex Direction: Column */
.flex-column { display: flex; flex-direction: column; }

Column Reverse

Item 1

Item 2

Item 3

HTML

<div class="flex-container flex-column-reverse">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Flex Direction: Column Reverse */
.flex-column-reverse { display: flex; flex-direction: column-reverse; }

Justify Content

Controls alignment along the main axis:

flex-start

Start

Item

HTML

<div class="flex-container justify-start">
    <div class="flex-item">Start</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Justify Content: flex-start */
.justify-start { display: flex; justify-content: flex-start; }

flex-end

Item

End

HTML

<div class="flex-container justify-end">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">End</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Justify Content: flex-end */
.justify-end { display: flex; justify-content: flex-end; }

flex-center

Item

Center

Item

HTML

<div class="flex-container justify-center">
    <div class="flex-item">Item</div>
    <div class="flex-item">Center</div>
    <div class="flex-item">Item</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Justify Content: center */
.justify-center { display: flex; justify-content: center; }

space-between

Between

Item

HTML

<div class="flex-container justify-between">
    <div class="flex-item">Between</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Justify Content: space-between */
.justify-between { display: flex; justify-content: space-between; }

space-evenly

Around

Item

Evenly

Item

HTML

<div class="flex-container justify-around">
    <div class="flex-item">Around</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

CSS

/* Shared styles for the demo visuals */
.flex-container {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 200px;
}
.flex-item {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}
.flex-item:nth-child(2) { background: #8b5cf6; }
.flex-item:nth-child(3) { background: #10b981; }

/* Justify Content: space-around */
.justify-around { display: flex; justify-content: space-around; }

/* Justify Content: space-evenly */
.justify-evenly { display: flex; justify-content: space-evenly; }

Align Items

Controls alignment along the cross axis:

Cross Axis Alignment

Stretch

Item

Start

Item

End

Item

Center

Item

HTML

<div class="flex-container align-center">
    <div class="flex-item">Center</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

/* Align Items CSS */
.align-stretch { align-items: stretch; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }

Flex Wrap

Controls whether flex items wrap to new lines:

Wrap Behavior

No Wrap

Item

Wrap

Item

HTML

<div class="flex-container flex-wrap">
    <div class="flex-item">Wrap</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

Card 1

This is a flexible card that adapts to available space.

Card 2

Cards automatically wrap to new lines when needed.

Card 3

Perfect for responsive design!

HTML

<div class="card-layout">
    <div class="card">
        <h3>Card 1</h3>
        <p>This is a flexible card that adapts to available space.</p>
    </div>
    <div class="card">
        <h3>Card 2</h3>
        <p>Cards automatically wrap to new lines when needed.</p>
    </div>
    <div class="card">
        <h3>Card 3</h3>
        <p>Perfect for responsive design!</p>
    </div>
</div>

/* Flex Wrap CSS */
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

Flex Properties

Control individual flex item behavior:

Flex Grow/Shrink

Grow 1

Grow 2

No Shrink

Flex Basis

200px

300px

Auto

Order

Order 3

Order 1

Order 2

/* Flex Properties CSS */
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-basis-200 { flex-basis: 200px; }
.order-1 { order: 1; }

Real-World Layout

Complete layout example using Flexbox:

Header-Sidebar-Content-Footer Layout

Main Content

HTML

<div class="header-footer-layout">
    <div class="header">Header</div>
    <div class="main-content">
        <div class="sidebar">Sidebar</div>
        <div class="content">Main Content</div>
    </div>
    <div class="footer">Footer</div>
</div>

/* Complete Layout CSS */
.header-footer-layout {
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.header-footer-layout .header {
    background: #3b82f6;
    color: white;
    padding: 1rem;
    text-align: center;
}

.header-footer-layout .main-content {
    display: flex;
    flex: 1;
}

.header-footer-layout .sidebar {
    background: #8b5cf6;
    color: white;
    padding: 1rem;
    width: 200px;
}

.header-footer-layout .content {
    background: #10b981;
    color: white;
    padding: 1rem;
    flex: 1;
}

.header-footer-layout .footer {
    background: #6b7280;
    color: white;
    padding: 1rem;
    text-align: center;
}

Card Layout

Responsive card layout using Flexbox:

Responsive Cards

Card 1

This is a flexible card that adapts to available space.

Card 2

Cards automatically wrap to new lines when needed.

Card 3

Perfect for responsive design!

/* Card Layout CSS */
.card-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 300px;
    background: white;
    border-radius: 8px;
    padding: 1rem;
}

Flexbox Properties

display: flex: Creates a flex container
flex-direction: Row, column, or reverse
justify-content: Main axis alignment
align-items: Cross axis alignment
flex-wrap: Wrap behavior
flex-grow: How much item should grow
flex-shrink: How much item should shrink
flex-basis: Initial size before growing/shrinking

Flexbox Best Practices

Use flex: 1 for equal distribution
Combine justify-content and align-items for centering
Use flex-wrap for responsive layouts
Set flex-basis for initial sizing
Use gap instead of margins for spacing
Consider order for visual reordering