CSS Flex Responsive

Create responsive layouts with Flexbox

📱 Responsive Flexbox

Flexbox makes creating responsive layouts incredibly easy. Items automatically adjust to different screen sizes, and you can use media queries for fine-tuned control. 


/* Responsive flex container */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.item {
    flex: 1 1 300px; /* Grow, shrink, min 300px */
}

Visual Result:

Responsive Item 1
Responsive Item 2
Responsive Item 3

Responsive Flexbox Techniques

🔄

flex-wrap

Allow items to wrap to new lines 

flex-wrap: wrap;
flex-wrap: nowrap;
📏

flex-basis

Set minimum item width 

flex: 1 1 300px;
flex-basis: 250px;
📱

Media Queries

Change flex properties at breakpoints 

@media (max-width: 768px) {
  flex-direction: column;
}
🎯

Auto Margins

Push items to edges responsively 

margin-left: auto;
margin-right: auto;

🔹 flex-wrap Examples

The flex-wrap property controls whether flex items wrap onto multiple lines. Values: nowrap (default), wrap, wrap-reverse. Enabling wrapping is key for responsive design, preventing overflow. Combined with flex-basis, it creates intrinsic grid-like behavior. align-content controls spacing between lines. Essential for galleries, nav menus, and adaptive layouts.

🔸 No Wrap (Default) 

.container {
    display: flex;
    flex-wrap: nowrap; /* Items stay on one line */
}

Output:

Item 1
Item 2
Item 3
Item 4

🔸 Wrap 

.container {
    display: flex;
    flex-wrap: wrap; /* Items wrap to new lines */
}

Output:

Item 1
Item 2
Item 3
Item 4

🔹 Responsive Card Grid

A responsive card grid uses flexbox or CSS Grid to adapt column count based on screen width. With flexbox: display: flex; flex-wrap: wrap;, items: flex: 1 1 300px;. CSS Grid: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));. gap ensures consistent gutters. Mobile-first, performant, and SEO-friendly, it presents structured content chunks that enhance engagement and reduce bounce rates. 

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    flex: 1 1 300px; /* Grow, shrink, min 300px wide */
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Output:

Card 1

This card will wrap to a new line when the screen gets too small.

Card 2

Cards automatically adjust their width based on available space.

🔹 Mobile-First Responsive Design

Mobile-first design starts with small screen styling, then enhances for larger viewports via min-width media queries. This progressive enhancement ensures core content works on limited devices first, resulting in leaner, performant CSS. It prioritizes content, improving SEO as key information is HTML-first. Techniques: fluid typography (clamp()), flexible images, relative units. Enhances accessibility, UX, and search rankings. 

/* Mobile first (default) */
.navbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
    .navbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .navbar {
        padding: 1rem 2rem;
    }
}

Mobile View:

🔹 Responsive Image Gallery

A responsive image gallery displays a grid of images that rearrange and resize with screen size. Using CSS Grid: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));. Images: max-width: 100%; height: auto;. object-fit ensures consistent cropping. Implement srcset for performance. Descriptive alt aids accessibility and SEO. Fast loading and engaging visuals improve user interaction and time on page. 

<!-- HTML -->
<div class="gallery">
    <div class="image-item">Image 1</div>
    <div class="image-item">Image 2</div>
    <div class="image-item">Image 3</div>
    <div class="image-item">Image 4</div>
    <div class="image-item">Image 5</div>
    <div class="image-item">Image 6</div>
</div>
/* CSS */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.image-item {
    flex: 1 1 150px; /* Min 150px, grow to fill */
    height: 150px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

/* Ensure nice proportions */
@media (max-width: 480px) {
    .image-item {
        flex: 1 1 calc(50% - 0.25rem);
    }
}

Output:

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

🔹 Common Responsive Patterns

Common flexbox patterns include Holy Grail layout, equal-height cards, vertical centering, and responsive nav bars. These solve layout challenges with efficient CSS. For example, equal-height cards use align-items: stretch. Responsive navs use flex-wrap and media queries. Patterns enhance UX with consistent interfaces, improve SEO via clean HTML/CSS, and ensure cross-browser compatibility for professional results.

Popular Responsive Patterns:

  • Holy Grail Layout: Header, footer, sidebar, main content
  • Card Grid: Flexible cards that wrap and resize
  • Navigation Bar: Horizontal on desktop, vertical on mobile
  • Media Object: Image + text that stacks on small screens
  • Sticky Footer: Footer always at bottom of viewport

🔸 Sticky Footer Example 

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

main {
    flex: 1; /* Takes remaining space */
}

footer {
    /* Stays at bottom */
}

🧠 Test Your Knowledge

What does flex: 1 1 300px mean?