Lesson 8: CSS Box Model, Flexbox & Responsive Design

Goal: Control spacing and layout, including on mobile.

Box Model

Every element is a box: Content → Padding → Border → Margin

css

.card {

    width: 300px;

    padding: 20px;        /* space inside */

    border: 2px solid #333;

    margin: 15px;         /* space outside */

    border-radius: 10px;  /* rounded corners */

}

Flexbox

css

.container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}

html

<div class="container">

    <div class="card">Card 1</div>

    <div class="card">Card 2</div>

    <div class="card">Card 3</div>

</div>

Responsive Design

css

@media (max-width: 600px) {

    .container {

        flex-direction: column;

    }

}

On screens narrower than 600px, the cards stack vertically.

Practice: Build three service cards that sit side by side on desktop and stack on mobile.