CSS Flexbox Layout

Introduction to CSS Flexbox

CSS Flexbox, commonly called Flexbox, is a modern CSS layout
system designed to make it easier to arrange elements in rows and columns.

Before Flexbox became widely supported, developers often relied on floats,
inline-block elements, tables, and complicated positioning techniques to
create layouts.

Flexbox provides a much cleaner way to control:

• Horizontal layouts.
• Vertical layouts.
• Spacing between elements.
• Alignment.
• Responsive wrapping.
• Flexible element sizes.
• Navigation menus.
• Cards and dashboards.

1. The Flex Container

Flexbox begins by turning an element into a flex container.

.container {
    display: flex;
}

The direct children of the container automatically become
flex items.

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

The three child elements are now flex items.

2. Main Axis and Cross Axis

Flexbox works with two important directions:

• Main axis
• Cross axis

By default, the main axis runs horizontally from left to right.
The cross axis runs vertically.

However, the direction can be changed using
flex-direction.

3. Flex Direction

The flex-direction property controls the direction in which
flex items are arranged.

Common values include:

• row
• row-reverse
• column
• column-reverse

Row

.container {
    display: flex;
    flex-direction: row;
}

This is the default direction. Items are arranged horizontally.

Column

.container {
    display: flex;
    flex-direction: column;
}

Items are arranged vertically.

Row Reverse

.container {
    display: flex;
    flex-direction: row-reverse;
}

Items are arranged horizontally in the reverse direction.

Column Reverse

.container {
    display: flex;
    flex-direction: column-reverse;
}

Items are arranged vertically in the reverse direction.

4. Justify Content

The justify-content property controls how flex items are
distributed along the main axis.

Common values include:

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

Center

.container {
    display: flex;
    justify-content: center;
}

All flex items are positioned toward the center of the main axis.

Space Between

.container {
    display: flex;
    justify-content: space-between;
}

The first item is placed at one end and the last item at the opposite end,
with available space distributed between the items.

Space Evenly

.container {
    display: flex;
    justify-content: space-evenly;
}

Available space is distributed evenly around the flex items.

5. Align Items

The align-items property controls alignment along the
cross axis.

Common values include:

• stretch
• flex-start
• flex-end
• center
• baseline

For example:

.container {
    display: flex;
    align-items: center;
}

When the flex direction is a row, this commonly allows items to be centered
vertically.

6. Centering an Element with Flexbox

One of the most popular uses of Flexbox is centering an element horizontally
and vertically.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

If the container has a defined height, this can provide a simple and
reliable way to center content.

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

7. Flex Wrap

By default, flex items try to remain on one line.
The flex-wrap property controls whether items are allowed to
move onto additional lines.

.container {
    display: flex;
    flex-wrap: wrap;
}

This is extremely useful for responsive card layouts.

For example, if there is no longer enough horizontal space for four cards,
Flexbox can move one or more cards onto another row.

8. No Wrap

The default value is:

.container {
    flex-wrap: nowrap;
}

With nowrap, flex items remain on one line and may shrink or
overflow depending on the other flex properties.

9. Wrap Reverse

Flexbox also supports:

.container {
    flex-wrap: wrap-reverse;
}

This allows wrapping while reversing the cross-axis direction of the lines.

10. The Gap Property

The gap property provides a simple way to create consistent
space between flex items.

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

You can also control row and column gaps independently.

.container {
    display: flex;
    row-gap: 20px;
    column-gap: 30px;
}

Using gap is often cleaner than adding margins to every child.

11. Align Content

The align-content property becomes important when a flex
container has multiple lines of flex items.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

It controls how the lines themselves are distributed along the cross axis.

Do not confuse align-content with
align-items.

• align-items aligns items within a flex line.
• align-content distributes multiple flex lines.

12. Align Self

The align-self property allows one flex item to override the
container’s align-items setting.

.special-item {
    align-self: flex-end;
}

This is useful when one item needs different cross-axis alignment from the
other items.

13. Flex Grow

The flex-grow property determines how a flex item can grow when
additional space is available.

.item {
    flex-grow: 1;
}

If several items have the same grow value, they can share available space
proportionally.

.item-one {
    flex-grow: 1;
}

.item-two {
    flex-grow: 1;
}

The available extra space can be distributed between the two items.

14. Flex Shrink

The flex-shrink property determines how an item can shrink when
there is not enough space.

.item {
    flex-shrink: 1;
}

The default value is generally 1.

You can prevent an item from shrinking with:

.item {
    flex-shrink: 0;
}

Use this carefully because preventing shrinking can cause overflow on small
screens.

15. Flex Basis

The flex-basis property defines the initial size of a flex item
before the remaining available space is distributed.

.item {
    flex-basis: 250px;
}

It is related to the main axis. In a row layout, it generally represents
the initial width. In a column layout, it generally represents the initial
height.

16. The Flex Shorthand

The flex property is a shorthand for:

• flex-grow
• flex-shrink
• flex-basis

For example:

.item {
    flex: 1 1 250px;
}

This means:

• Grow when extra space is available.
• Shrink when necessary.
• Start with a basis of 250 pixels.

A very common flexible layout pattern is:

.item {
    flex: 1;
}

17. Flex Order

The order property changes the visual order of flex items.

.first {
    order: 2;
}

.second {
    order: 1;
}

The item with the smaller order value appears first.

Be careful when using order to rearrange content because visual order and
semantic or keyboard navigation order can become different.

18. Flexbox Navigation Menu

Flexbox is excellent for building navigation bars.

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

.navigation-links {
    display: flex;
    gap: 20px;
}

This allows the logo, navigation links, and other controls to be arranged
efficiently.

19. Responsive Flexbox

Flexbox becomes especially powerful when combined with media queries.

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 280px;
}

@media (max-width: 600px) {

    .cards {
        flex-direction: column;
    }

}

The cards can remain flexible on larger screens while stacking vertically on
smaller screens.

20. Flexbox vs Positioning

Flexbox should normally be used for arranging groups of elements.
Positioning is better suited for elements that need to be placed independently
or layered over other content.

For example:

• Use Flexbox for navigation links.
• Use Flexbox for rows of cards.
• Use Flexbox for buttons and controls.
• Use absolute positioning for a badge inside a card.
• Use fixed positioning for a floating support button.

21. Practical Flexbox Project

Create a responsive Dwallnet Academy course section containing:

1. A heading.
2. Three course cards.
3. A flexible card container.
4. Consistent gaps between cards.
5. A course title and description.
6. An enrollment button.
7. Responsive wrapping.
8. Different layouts for desktop and mobile screens.

The layout should remain readable when the browser width changes.

22. Common Flexbox Mistakes

Mistake 1: Forgetting Display Flex

.container {
    justify-content: center;
}

This will not create a Flexbox layout because the container has not been
given display: flex.

Correct:

.container {
    display: flex;
    justify-content: center;
}

Mistake 2: Confusing Main Axis and Cross Axis

Remember that justify-content works on the main axis while
align-items works on the cross axis.

Changing flex-direction changes the orientation of these axes.

Mistake 3: Using Margin for Everything

Flexbox provides gap, which is often a cleaner solution for
spacing between items.

Mistake 4: Forgetting Flex Wrap

A row of cards may overflow on small screens if wrapping is not enabled.

.cards {
    display: flex;
    flex-wrap: wrap;
}

23. Browser Developer Tools

Modern browsers provide excellent Flexbox debugging tools.

When inspecting a flex container, Developer Tools can often display:

• The main axis.
• The cross axis.
• Flex item dimensions.
• Available space.
• Alignment.
• Wrapping behavior.

Use these tools when a Flexbox layout does not behave as expected.

24. Flexbox Cheat Sheet

Conclusion

Flexbox is one of the most important CSS layout systems for modern web
development.

It allows developers to create flexible layouts without depending heavily on
floats or absolute positioning.

Mastering flex-direction, justify-content,
align-items, flex-wrap, gap,
flex-grow, flex-shrink, and
flex-basis will give you a strong foundation for building
responsive websites.

The next major CSS layout system to learn is CSS Grid,
which is especially powerful for two-dimensional page layouts.