🎨 Lesson 12: Flexbox

Flexbox is a modern CSS layout method that makes it easy to create flexible, responsive layouts. It's become the standard way to build layouts on the web.

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It automatically handles spacing, alignment, and distribution of space.

Creating a Flex Container

Apply display: flex to make an element a flex container:

.container {
    display: flex;
    /* Children become flex items */
}
        

Item 1

Item 2

Item 3

Main Flex Properties (Container)

flex-direction

Controls direction of items. Row or column:

flex-direction: row;            /* Horizontal (default) */
flex-direction: row-reverse;    /* Horizontal, reversed */
flex-direction: column;         /* Vertical */
flex-direction: column-reverse;  /* Vertical, reversed */
        

flex-direction: row

flex-direction: column

justify-content

Aligns items along the main axis (horizontal if row, vertical if column):

justify-content: flex-start;        /* Items at start (default) */
justify-content: flex-end;          /* Items at end */
justify-content: center;            /* Items centered */
justify-content: space-between;     /* Space between items */
justify-content: space-around;      /* Space around items */
justify-content: space-evenly;      /* Equal space everywhere */
        

justify-content: center

Item

justify-content: space-between

Item

align-items

Aligns items along the cross axis (vertical if row, horizontal if column):

align-items: stretch;       /* Items fill container (default) */
align-items: flex-start;    /* Items at top */
align-items: flex-end;      /* Items at bottom */
align-items: center;        /* Items centered vertically */
align-items: baseline;      /* Items aligned to text baseline */
        

align-items: center (vertically centered)

Item 1

Item 2

Item 3

flex-wrap

Control whether items wrap to multiple lines:

flex-wrap: nowrap;      /* Don't wrap (default) */
flex-wrap: wrap;        /* Wrap to new lines */
flex-wrap: wrap-reverse; /* Wrap in reverse */
        

gap

Space between flex items:

gap: 10px;              /* 10px gap between items */
gap: 10px 20px;         /* 10px vertical, 20px horizontal */
        

Flex Item Properties

flex

Controls how much space an item takes. Shorthand for flex-grow, flex-shrink, flex-basis:

flex: 1;        /* Grow equally with other flex: 1 items */
flex: 2;        /* Take twice as much space as flex: 1 items */
flex: 0 1 200px; /* Don't grow, can shrink, 200px base size */
        

Different flex values

flex: 1

flex: 2 (2x larger)

flex: 1

align-self

Override container's align-items for a specific item:

align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
        

order

Change visual order of items without changing HTML:

order: 1;
order: 2;
order: 3;
/* Default order is 0 */
        

Items reordered with order property

1 (order: 3)

2 (order: 1)

3 (order: 2)

Common Flexbox Patterns

Centered Content

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
        

Perfectly Centered Content

Side Navigation + Main Content

.layout {
    display: flex;
    gap: 20px;
}

.sidebar {
    flex: 0 0 250px;    /* Fixed width sidebar */
}

.main {
    flex: 1;            /* Flexible main content */
}
        

Navigation Bar

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    flex: 0 0 auto;     /* Don't shrink */
}

.nav-items {
    display: flex;
    gap: 20px;
}

.spacer {
    flex: 1;            /* Takes remaining space */
}
        

Complete Flexbox Example

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f0f0f0;
}

.item {
    flex: 1;
    background: #667eea;
    color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.item.highlight {
    flex: 2;            /* Takes 2x space */
    background: #764ba2;
}
        

Browser Support

Flexbox is supported in all modern browsers. No special prefixes needed!

Key Takeaways

display: flex creates a flex container
flex-direction controls row or column layout
justify-content aligns items horizontally (or main axis)
align-items aligns items vertically (or cross axis)
flex property controls how items grow/shrink
gap creates space between items
Flexbox is responsive and flexible
Perfect for navigation bars, cards, and layouts

← Back to Course | ← Previous | Next: JavaScript Introduction →