Flexbox Layout

Introduction to CSS Flexbox

Flexbox (Flexible Box Layout) is a powerful CSS layout method that makes it easy to design flexible and responsive layout structures.

Flex Container Properties

Creating a Flex Container

.container {
    display: flex;
    /* or */
    display: inline-flex;
}

Flex Direction

flex-direction: row;         /* Default - left to right */
flex-direction: row-reverse; /* Right to left */
flex-direction: column;      /* Top to bottom */
flex-direction: column-reverse; /* Bottom to top */

Flex Wrap

flex-wrap: nowrap;    /* Default - single line */
flex-wrap: wrap;      /* Multiple lines */
flex-wrap: wrap-reverse; /* Multiple lines, reversed */

/* Shorthand */
flex-flow: row wrap;

Justify Content (Main Axis)

justify-content: flex-start;    /* Default */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Align Items (Cross Axis)

align-items: stretch;     /* Default */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

Flex Item Properties

Flex Grow, Shrink, and Basis

flex-grow: 1;     /* How much item should grow */
flex-shrink: 1;   /* How much item should shrink */
flex-basis: auto; /* Initial size before free space distribution */

/* Shorthand */
flex: 1;          /* flex: 1 1 0% */
flex: 0 1 auto;   /* Default */

Align Self

align-self: auto;       /* Default */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;

Common Flexbox Patterns

Centering Content

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.nav-links {
    display: flex;
    gap: 1rem;
    list-style: none;
}

Card Layout

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

.card {
    flex: 1 1 300px; /* Grow, shrink, min-width */
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
}

Complete Flexbox Example

<style>
.page-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #007bff;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-content {
    display: flex;
    flex: 1;
}

.sidebar {
    flex: 0 0 250px;
    background-color: #f8f9fa;
    padding: 1rem;
}

.content {
    flex: 1;
    padding: 1rem;
}

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

.feature-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}

.feature-card {
    flex: 1 1 250px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}
</style>

<div class="page-layout">
    <header class="header">
        <h1>My Website</h1>
        <nav>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main class="main-content">
        <aside class="sidebar">
            <h3>Sidebar</h3>
            <p>Navigation links here</p>
        </aside>
        
        <div class="content">
            <h2>Welcome to Flexbox</h2>
            <div class="feature-cards">
                <div class="feature-card">
                    <h3>Feature 1</h3>
                    <p>Description here</p>
                </div>
                <div class="feature-card">
                    <h3>Feature 2</h3>
                    <p>Description here</p>
                </div>
                <div class="feature-card">
                    <h3>Feature 3</h3>
                    <p>Description here</p>
                </div>
            </div>
        </div>
    </main>
    
    <footer class="footer">
        <p>© 2024 My Website. All rights reserved.</p>
    </footer>
</div>