Css Flexbox Patterns | Advanced

Using Flexbox patterns for responsive design

CSS Flexbox provides powerful layout capabilities for creating responsive designs. This tutorial covers common Flexbox patterns that you can use to build responsive and flexible web layouts.

Key Points:

Flexbox patterns simplify the creation of responsive layouts.
Common patterns include navbars, galleries, cards, and footers.
Understanding these patterns can enhance your web design skills.

Responsive Navbar

A responsive navbar can be created using Flexbox. Here is an example:


.flex-navbar {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    color: #fff;
    padding: 10px;
}

.flex-navbar a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

Responsive Gallery

A responsive gallery layout can be achieved using Flexbox. Here is an example:


.flex-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.flex-gallery img {
    max-width: 100%;
    height: auto;
}

Responsive Card

A responsive card layout can be created using Flexbox. Here is an example:


.flex-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.flex-card img {
    width: 100%;
    height: auto;
}

.flex-card-body {
    padding: 20px;
}

Card Title

Card content goes here. This is a simple card layout using Flexbox.

Responsive Footer

A responsive footer can be created using Flexbox. Here is an example:


.flex-footer {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    color: #fff;
    padding: 10px;
}

Combining Flexbox Patterns

Combining multiple Flexbox patterns allows you to create sophisticated and responsive designs. Here is an example:


<div class="swf-lsn-flex-navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</div>

<div class="swf-lsn-flex-gallery">
    <img src="https://via.placeholder.com/150" alt="Gallery Image 1">
    <img src="https://via.placeholder.com/150" alt="Gallery Image 2">
    <img src="https://via.placeholder.com/150" alt="Gallery Image 3">
    <img src="https://via.placeholder.com/150" alt="Gallery Image 4">
</div>

<div class="swf-lsn-flex-card">
    <img src="https://via.placeholder.com/300x200" alt="Card Image">
    <div class="swf-lsn-flex-card-body">
        <h3>Card Title</h3>
        <p>Card content goes here. This is a simple card layout using Flexbox.</p>
    </div>
</div>

<div class="swf-lsn-flex-footer">
    <div>© 2024 Your Company</div>
    <div>
        <a href="#" style="color: #fff; text-decoration: none; padding: 10px;">Privacy Policy</a>
        <a href="#" style="color: #fff; text-decoration: none; padding: 10px;">Terms of Service</a>
    </div>
</div>

Summary

In this tutorial, you learned how to use CSS Flexbox patterns to create responsive designs. You explored common patterns such as navbars, galleries, cards, and footers, and saw how to combine these patterns to build sophisticated web layouts. Understanding and applying these patterns will enhance your skills as an advanced web developer, enabling you to create flexible and responsive web designs.

HTML CSS - CSS Flexbox Patterns