Flexbox Fundamentals

Welcome to Flexbox!

Flexbox (Flexible Box Layout) is like a magic wand for CSS layouts. It makes creating responsive layouts intuitive and powerful. Think of it as arranging items on a flexible shelf that can stretch, shrink, and align items perfectly!

Flexbox Terminology

• Flex Container: The parent element with display: flex
• Flex Items: Direct children of the flex container
• Main Axis: Primary axis along which items are laid out
• Cross Axis: Perpendicular to the main axis

Creating a Flex Container

/* Create a flex container */
.container {
    display: flex;
}

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

That's it! All direct children become flex items automatically.

Basic Example

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

.flex-container {
    display: flex;
    border: 2px solid #333;
    padding: 10px;
}

.flex-item {
    background: #e0e0e0;
    margin: 5px;
    padding: 20px;
}

Flex Direction

Controls the direction of the main axis - like choosing which way your shelf faces!

/* Flex direction values */
.container {
    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 */
}

Justify Content

Controls how items are distributed along the main axis - like spreading books on a shelf!

/* Justify content values */
.container {
    justify-content: flex-start;    /* Pack items at start */
    justify-content: flex-end;      /* Pack items at end */
    justify-content: center;        /* Center items */
    justify-content: space-between; /* Distribute evenly, first/last at edges */
    justify-content: space-around;  /* Distribute evenly with equal space */
    justify-content: space-evenly;  /* Distribute with equal space between */
}

Visual Examples

/* Navigation bar example */
.nav {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #333;
}

.nav-logo {
    color: white;
}

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

/* Centered content */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

Align Items

Controls how items align on the cross axis - like adjusting the height of books on a shelf!

/* Align items values */
.container {
    align-items: stretch;     /* Default: stretch to fill */
    align-items: flex-start;  /* Align to start of cross axis */
    align-items: flex-end;    /* Align to end of cross axis */
    align-items: center;      /* Center on cross axis */
    align-items: baseline;    /* Align baselines */
}

Practical Examples

/* Vertically centered card */
.card {
    display: flex;
    align-items: center;
    padding: 2rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-image {
    width: 100px;
    height: 100px;
    margin-right: 1rem;
}

.card-content {
    flex: 1;
}

Flex Wrap

Controls whether items wrap to new lines - like books flowing to the next shelf!

/* Flex wrap values */
.container {
    flex-wrap: nowrap;       /* Default: single line */
    flex-wrap: wrap;         /* Wrap to multiple lines */
    flex-wrap: wrap-reverse; /* Wrap in reverse order */
}

Responsive Gallery Example

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

.gallery-item {
    flex: 1 1 300px; /* Grow, shrink, base width */
    max-width: calc(33.333% - 1rem);
}

/* Responsive breakpoints */
@media (max-width: 900px) {
    .gallery-item {
        max-width: calc(50% - 1rem);
    }
}

@media (max-width: 600px) {
    .gallery-item {
        max-width: 100%;
    }
}

Align Content

Controls spacing between rows when wrapping - like adjusting space between shelves!

/* Align content values (only works with wrap) */
.container {
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch;
}

Flex Item Properties

Flex Grow

/* Flex grow - ability to grow */
.item {
    flex-grow: 0; /* Default: don't grow */
    flex-grow: 1; /* Grow to fill space */
    flex-grow: 2; /* Grow twice as much as flex-grow: 1 */
}

Flex Shrink

/* Flex shrink - ability to shrink */
.item {
    flex-shrink: 1; /* Default: can shrink */
    flex-shrink: 0; /* Don't shrink */
    flex-shrink: 2; /* Shrink twice as much */
}

Flex Basis

/* Flex basis - initial size */
.item {
    flex-basis: auto;  /* Default: use width/height */
    flex-basis: 200px; /* Start at 200px */
    flex-basis: 25%;   /* Start at 25% of container */
}

Flex Shorthand

/* Flex shorthand: grow shrink basis */
.item {
    flex: 0 1 auto;    /* Default */
    flex: 1;           /* flex: 1 1 0 */
    flex: auto;        /* flex: 1 1 auto */
    flex: none;        /* flex: 0 0 auto */
    flex: 2 1 300px;   /* Custom values */
}

Align Self

Override align-items for individual items - like adjusting one book differently!

/* Align self values */
.item {
    align-self: auto;       /* Use container's align-items */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}

Order

Change visual order without changing HTML - like rearranging books!

/* Order property */
.item {
    order: 0;  /* Default */
    order: -1; /* Move before default items */
    order: 1;  /* Move after default items */
}

Responsive Reordering

/* Mobile-first design */
.sidebar {
    order: 2;
}

.main-content {
    order: 1;
}

@media (min-width: 768px) {
    .sidebar {
        order: 1;
    }
    
    .main-content {
        order: 2;
    }
}

Common Flexbox Patterns

Holy Grail Layout

<div class="holy-grail">
    <header>Header</header>
    <div class="holy-grail-body">
        <nav>Navigation</nav>
        <main>Main Content</main>
        <aside>Sidebar</aside>
    </div>
    <footer>Footer</footer>
</div>

.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.holy-grail-body {
    display: flex;
    flex: 1;
}

nav {
    flex: 0 0 200px;
}

main {
    flex: 1;
}

aside {
    flex: 0 0 200px;
}

@media (max-width: 768px) {
    .holy-grail-body {
        flex-direction: column;
    }
    
    nav, aside {
        flex: 0 0 auto;
    }
}

Card Layout

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

.card {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

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

.card-footer {
    padding: 1rem;
    border-top: 1px solid #eee;
}

Sticky Footer

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

main {
    flex: 1;
}

footer {
    background: #333;
    color: white;
    padding: 1rem;
}

Flexbox Best Practices

Tips and Tricks

• Use margin: auto on flex items for smart spacing
• Combine Flexbox with other layout methods
• Use min-width: 0 to prevent overflow issues
• Test across different browsers and devices
• Use browser dev tools to visualize flex containers

Flexbox vs Other Layout Methods