CSS Flexbox

Master the flexible box layout for modern, responsive web designs

Introduction to Flexbox

CSS Flexbox (Flexible Box Layout) is a powerful layout method that makes it easy to design flexible and responsive layout structures. It's perfect for distributing space and aligning items in a container.

Key Flexbox Concepts:

Flex Container: The parent element with display: flex
Flex Items: Direct children of the flex container
Main Axis: Primary direction of the flex container
Cross Axis: Perpendicular to the main axis

Creating a Flex Container

Basic Flexbox Setup:

.container {
    display: flex;
}

/* HTML */

    Item 1
    Item 2
    Item 3

Flex Container Properties

1. flex-direction

Defines the direction of the main axis.

.container {
    display: flex;
    flex-direction: row;        /* Default: left to right */
}

/* Other options */
.container-column {
    flex-direction: column;     /* Top to bottom */
}

.container-row-reverse {
    flex-direction: row-reverse; /* Right to left */
}

.container-column-reverse {
    flex-direction: column-reverse; /* Bottom to top */
}

2. justify-content

Aligns items along the main axis.

.container {
    display: flex;
    justify-content: flex-start;  /* Default: start of container */
}

/* Alignment options */
.center {
    justify-content: center;      /* Center items */
}

.space-between {
    justify-content: space-between; /* Equal space between items */
}

.space-around {
    justify-content: space-around;  /* Equal space around items */
}

.space-evenly {
    justify-content: space-evenly;  /* Equal space everywhere */
}

.flex-end {
    justify-content: flex-end;    /* End of container */
}

3. align-items

Aligns items along the cross axis.

.container {
    display: flex;
    align-items: stretch;       /* Default: stretch to fill */
}

/* Alignment options */
.center-items {
    align-items: center;        /* Center vertically */
}

.start-items {
    align-items: flex-start;    /* Top alignment */
}

.end-items {
    align-items: flex-end;      /* Bottom alignment */
}

.baseline-items {
    align-items: baseline;      /* Baseline alignment */
}

4. flex-wrap

Controls whether items wrap to new lines.

.container {
    display: flex;
    flex-wrap: nowrap;          /* Default: no wrapping */
}

.wrap-container {
    flex-wrap: wrap;            /* Allow wrapping */
}

.wrap-reverse {
    flex-wrap: wrap-reverse;    /* Wrap in reverse order */
}

5. gap

Sets space between flex items.

.container {
    display: flex;
    gap: 20px;                  /* 20px gap between all items */
}

.container-custom-gap {
    gap: 10px 20px;            /* 10px row gap, 20px column gap */
}

Flex Item Properties

1. flex-grow

Defines how much an item should grow.

.item {
    flex-grow: 0;              /* Default: don't grow */
}

.grow-item {
    flex-grow: 1;              /* Grow to fill available space */
}

.grow-more {
    flex-grow: 2;              /* Grow twice as much as flex-grow: 1 */
}

2. flex-shrink

Defines how much an item should shrink.

.item {
    flex-shrink: 1;            /* Default: can shrink */
}

.no-shrink {
    flex-shrink: 0;            /* Don't shrink */
}

3. flex-basis

Sets the initial size of an item.

.item {
    flex-basis: auto;          /* Default: based on content */
}

.fixed-width {
    flex-basis: 200px;         /* Fixed width of 200px */
}

.percentage-width {
    flex-basis: 30%;           /* 30% of container width */
}

4. flex (Shorthand)

.item {
    flex: 0 1 auto;            /* grow shrink basis */
}

.equal-items {
    flex: 1;                   /* Equal width items */
}

.fixed-flexible {
    flex: 0 0 200px;           /* Fixed 200px width */
}

5. align-self

Overrides align-items for individual items.

.special-item {
    align-self: center;        /* Center this item only */
}

.top-item {
    align-self: flex-start;    /* Align to top */
}

.bottom-item {
    align-self: flex-end;      /* Align to bottom */
}

Practical Flexbox Examples

1. Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #333;
}

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

.nav-brand {
    font-size: 1.5rem;
    font-weight: bold;
}

2. Card Layout

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.card {
    flex: 1 1 300px;           /* Grow, shrink, min-width 300px */
    max-width: 400px;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

3. Centered Content

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

.centered-content {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

4. Sidebar Layout

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 250px;           /* Fixed width sidebar */
    background-color: #f8f9fa;
    padding: 2rem;
}

.main-content {
    flex: 1;                   /* Take remaining space */
    padding: 2rem;
}

Flexbox Best Practices

Tips for Using Flexbox:

Use for 1D layouts: Flexbox is perfect for single-direction layouts
Combine with Grid: Use CSS Grid for 2D layouts, Flexbox for components
Mobile-first: Design for mobile, then enhance for larger screens
Use gap: Prefer gap over margins for spacing between items
Test thoroughly: Check layouts on different screen sizes

Common Flexbox Patterns

/* Equal height columns */
.equal-columns {
    display: flex;
}

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

/* Sticky footer */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

.footer {
    flex-shrink: 0;
}