← Back to Examples

Flexbox Layout Demo

Flexbox is perfect for one-dimensional layouts. Here are the most common use cases!

1. Basic Flexbox

Just add display: flex to the container!

1
2
3
.container {
    display: flex;
}

2. Flex Direction

flex-direction: row (default)

1
2
3

flex-direction: row-reverse

1
2
3

flex-direction: column

1
2
3

3. Justify Content (Main Axis)

justify-content: flex-start

1
2
3

justify-content: flex-end

1
2
3

justify-content: center

1
2
3

justify-content: space-between

1
2
3

justify-content: space-around

1
2
3

justify-content: space-evenly

1
2
3

4. Align Items (Cross Axis)

align-items: stretch (default)

1
2
3

align-items: flex-start

1
2
3

align-items: center

1
2
3

align-items: flex-end

1
2
3

5. Flex Wrap

flex-wrap: wrap - Items wrap to new line when needed

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

6. Flex Grow

Control how items expand to fill space

Fixed (100px)
flex-grow: 1
flex-grow: 2

The item with grow: 2 takes twice as much available space as grow: 1

7. Practical Example: Navigation Bar

.nav {
    display: flex;
}
.spacer {
    flex-grow: 1;  /* Pushes Login to the right */
}

8. Practical Example: Card Layout

Card image

Card Title

Card description goes here with some text.

Card image

Another Card

More content for this card.

Card image

Third Card

Even more card content here.

.card-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.card {
    flex: 1 1 250px;  /* grow, shrink, basis */
}

9. The Holy Grail: Perfect Centering

I'm Perfectly Centered!

Both horizontally and vertically

.container {
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertical */
    min-height: 200px;
}

← Back to Examples