Mastering CSS Flexbox: A Beginner's Guide to Flexible Layouts

CSS Flexbox (Flexible Box) is a modern layout system designed to simplify the process of arranging elements in a one-dimensional space—either horizontally (row) or vertically (column). It provides powerful alignment and spacing options, making it easier to create dynamic, responsive layouts without relying on float-based positioning.

In this guide, we'll break down each Flexbox property with clear explanations and practical examples to help you fully grasp its capabilities.

---

We will be using this HTML for our demonstration

<div class="flex-container">
  <div class="container-1">
    <div class="flex-item1">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <div class="container-2">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
  </div>
</div>

1. display: flex; - Enabling Flexbox

To use Flexbox, you need to set display: flex; on a container.

.container-1 {
  display: flex;
}

✅ This makes .container a flex container and all direct children become flex items. By default, the flex-direction is set to row (ie they are arranged horizontally as you can see below)

Visual depiction of flex-direction: row

---

2. flex-direction - Setting the Main Axis

This property determines the direction of the main axis.

.container-1 {
  display: flex;
  flex-direction: row; /* Default value */
  /*flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse; */
}

✅ Available values:

• row (default): Items are placed in a row (left to right).

• row-reverse: Items are placed in a row (right to left).

• column: Items are stacked in a column (top to bottom).

• column-reverse: Items are stacked in a column (bottom to top).

Visual depiction of flex-direction: row-reverse

Visual depiction of flex-direction: column.

Visual depiction of flex-direction: column-reverse

---

3. justify-content - Aligning Items Along the Main Axis

This property controls how flex items are spaced along the main axis.

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

✅ Available values:

• flex-start (default): Items align to the start of the container.

• flex-end: Items align to the end of the container.

• center: Items are centered.

• space-between: Items are evenly distributed, with the first item at the start and the last item at the end.

• space-around: Items have equal spacing around them.

• space-evenly: Items have equal spacing between and around them.

Visual depiction of justify-content: center

Visual depiction of justify-content: flex-start

Visual depiction of justify-content: flex-end

Visual depiction of justify-content: space-between

Visual depiction of justify-content: space-evenly

Visual depiction of justify-content: space-around

---

4. align-items - Aligning Items Along the Cross Axis

This property controls how flex items align along the cross axis (perpendicular to flex-direction).

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

✅ Available values:

• stretch (default): Items stretch to fill the container.

• flex-start: Items align at the start of the cross axis.

• flex-end: Items align at the end of the cross axis.

• center: Items align in the center of the cross axis.

• baseline: Items align according to their text baseline.

Visual depiction of align-items: center

Visual depiction of align-items: flex-start

Visual depiction of align-items: flex-end

---

5. align-self - Aligning Individual Items

This property allows a single item to override align-items and define its own alignment.

.flex-item1{
  align-self: flex-end;
}

✅ Accepts the same values as align-items (flex-start, flex-end, center, stretch, baseline).

---

6. flex-wrap - Handling Overflow

By default, flex items are forced onto a single line. flex-wrap allows items to wrap onto multiple lines if needed.

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

✅ Available values:

• nowrap (default): Items stay on a single line.

• wrap: Items wrap onto multiple lines.

• wrap-reverse: Items wrap onto multiple lines in reverse order.

Visual depiction of flex-wrap: wrap

Visual depiction of flex-wrap: nowrap

Visual depiction of flex-wrap: wrap-reverse

---

7. gap, row-gap, column-gap - Spacing Between Items

These properties define spacing between flex items.

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

✅ gap sets spacing for both rows and columns, while row-gap and column-gap allow for independent control.

Visual depiction of gap: 20px

---

8. flex-grow, flex-shrink, flex-basis - Controlling Item Size

These properties determine how flex items grow, shrink, and set initial sizes.

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

✅ Breakdown:

• flex-grow: Defines how much an item should grow (default is 0).

• flex-shrink: Defines how much an item should shrink when space is reduced.

• flex-basis: Defines the initial size before applying flex-grow or flex-shrink.

---

9. order - Rearranging Items

The order property in Flexbox allows you to change the visual arrangement of flex items without altering the actual HTML structure. By default, all flex items have an order of 0, meaning they appear in the order they are written in the HTML. However, you can assign different order values to change their positions.

.flex-item1 {
  order: 2;  /* Items with a lower order appear first */
}

✅ Default is 0; higher values push items further back.

---

Conclusion

CSS Flexbox is a powerful tool that simplifies layout design, making it easier to align, distribute, and resize elements dynamically. By mastering these properties, you can create flexible, maintainable layouts that adapt beautifully to different screen sizes.

Now that you've got a solid understanding of CSS Flexbox, if you’re also interested in CSS Grid, check out this guide on mastering Grid.

Happy coding!

Check out more properties from W3Schools or MDN Web Docs.