CSS Flexbox Basics (Align Items Like A Pro)

Are you tired of struggling with old CSS layout methods like floats and positioning? Flexbox is here to change the way you build web pages. It’s a modern layout model that helps you create flexible, responsive designs with minimal code.

In this guide, you will learn:

What is Flexbox?
Basics of CSS Flexbox
How to Create a Basic Flexbox Layout

What is Flexbox?

Flexbox (Flexible Box Layout) is a powerful CSS layout system that makes it easy to arrange elements in rows or columns, align items, and distribute space without writing complex CSS.

Basics of CSS Flexbox

Here are the basic concepts in CSS Flexbox:

The Flex Container

To enable Flexbox, you need to define a container with display: flex; or display: inline-flex;.

.container {
  display: flex;
}

.container {
  display: flex;
}

display: flex;: Creates a block-level flex container.
display: inline-flex;: Creates an inline-level flex container.

Flex Items

Any child elements inside a flex container become “flex items.”

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

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

Main Axis and Cross Axis

The main axis is the direction in which the flex items are placed (default: horizontally, from left to right).
The cross axis is perpendicular to the main axis (default: vertically).

Flex Container Properties

You can use several properties on the flex container to control the layout:

flex-direction

Defines the direction of the flex items.

🔢 Values:

row (default): Items are arranged horizontally.
column: Items are arranged vertically.
row-reverse: Items are arranged horizontally, but in reverse order.
column-reverse: Items are arranged vertically, but in reverse order.

🧪 Example:

.container {
  display: flex;
  flex-direction: row; /* other values: column, row-reverse, column-reverse */
}

.container {
  display: flex;
  flex-direction: row; /* other values: column, row-reverse, column-reverse */
}

justify-content

Aligns items along the main axis.

🔢 Values:

flex-start: Items are placed at the start of the container.
flex-end: Items are placed at the end.
center: Items are placed in the center.
space-between: Items are evenly spaced, with no space at the start and end.
space-around: Items are evenly spaced with space around them.
space-evenly: Items are spaced with equal spacing everywhere

🧪 Example:

.container {
  justify-content: center; /* other values: flex-start, flex-end, space-between, space-around, space-evenly */
}

.container {
  justify-content: center; /* other values: flex-start, flex-end, space-between, space-around, space-evenly */
}

align-items

Aligns items along the cross axis.

🔢 Values:

flex-start: Aligns items to the top (or start).
flex-end: Aligns items to the bottom (or end).
center: Centers items vertically (or along the cross axis).
stretch (default): Stretches items to fill the container.
baseline: Aligns items along their baseline.

🧪 Example:

.container {
  align-items: center; /* Other values: flex-start, flex-end, stretch, baseline */
}

.container {
  align-items: center; /* Other values: flex-start, flex-end, stretch, baseline */
}

align-content

Aligns rows (if the container has multiple rows) along the cross axis.

Works only when there are multiple rows (e.g., when flex-wrap is used).

🧪 Example:

.container {
  align-content: space-between; /* Values: flex-start, flex-end, center, space-between, space-around */
}

.container {
  align-content: space-between; /* Values: flex-start, flex-end, center, space-between, space-around */
}

Flex Item Properties

Now, let’s look at how you can control the individual items inside the flex container:

flex-grow

Defines how much a flex item should grow relative to the other items. Default is 0 (do not grow).

🔢 Possible values: 0, positive integer, auto

🧪 Example:

.item {
  flex-grow: 1; /* The item will grow to take up available space */
}

.item {
  flex-grow: 1; /* The item will grow to take up available space */
}

📌 When to Use flex-grow:

Use flex-grow when you want flex items to expand and take up available space in the container.

When items should grow to fill unused space.
To create responsive widths (e.g., 2 items growing proportionally).
To define how much each item grows relative to others (flex-grow: 2 grows twice as fast as flex-grow: 1).
Example: In a navbar, making the search bar grow to fill space between other fixed-size items.

flex-shrink

Defines how much a flex item should shrink relative to the other items. Default is 1 (can shrink).

🔢 Possible values: 0, positive integer, auto

🧪 Example:

.item {
  flex-shrink: 0; /* Prevents shrinking of the item */
}

.item {
  flex-shrink: 0; /* Prevents shrinking of the item */
}

📌 When to Use flex-shrink:

Use flex-shrink when you want items to shrink when the container is too small.

When content should reduce in size on smaller screens.
To prevent overflow in tight spaces.
To control how much each item shrinks relative to others (flex-shrink: 0 prevents shrinking).
Example: Prevent a button from shrinking, but allow text boxes to reduce in size.

flex-basis

Defines the initial size of a flex item before any remaining space is distributed. Default is auto (its natural size).

🔢 Possible values: 0, auto, specific size in px/em or in % (based on parent container size)

🧪 Example:

.item {
  flex-basis: 200px; /* The item starts with a base size of 200px */
}

.item {
  flex-basis: 200px; /* The item starts with a base size of 200px */
}

📌 When to Use flex-basis:

Use flex-basis to set the initial size of a flex item before flex-grow or flex-shrink applies.

When you want to define a starting width or height.
Useful to override the element’s default size or width/height.
Works with content-based layouts (e.g., flex-basis: auto) or fixed sizing (flex-basis: 200px).
Example: Giving cards a starting width of 300px but allowing them to grow/shrink as needed.

flex

A shorthand for flex-grow, flex-shrink, and flex-basis.

🧪 Example:

/* Example 1 */
.item {
  flex: 1; /* This is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}

/* Example 2 */
.item {
  flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}


/* Example 1 */
.item {
  flex: 1; /* This is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}

/* Example 2 */
.item {
  flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}

align-self

Allows you to override the align-items property for individual items.

🧪 Example:

.item {
  align-self: center; /* other values: flex-start, flex-end, stretch, baseline */
}

.item {
  align-self: center; /* other values: flex-start, flex-end, stretch, baseline */
}

Wrapping Flex Items

By default, flex items are placed on a single line, but you can make them wrap when the container is too small using flex-wrap.

🔢 Values:

wrap: Items will wrap onto multiple lines if needed.
nowrap: All items will be in a single line (default).
wrap-reverse: Items will wrap, but in the opposite direction.

🧪 Example:

.container {
  display: flex;
  flex-wrap: wrap; /* Other values: nowrap (default), wrap, wrap-reverse */
}

.container {
  display: flex;
  flex-wrap: wrap; /* Other values: nowrap (default), wrap, wrap-reverse */
}

Basic Flexbox Layout (Example)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;                    /* Activate Flexbox */
      flex-direction: row;              /* Align items horizontally */
      justify-content: space-between;   /* Space items evenly */
      align-items: center;              /* Vertically center items */
      height: 200px;                    /* Assigns height to container */
      background-color: lightgray;      /* Assigns background color to container */
    }
    .item {
      background-color: skyblue;
      padding: 20px;
      margin: 10px;
      text-align: center;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;                    /* Activate Flexbox */
      flex-direction: row;              /* Align items horizontally */
      justify-content: space-between;   /* Space items evenly */
      align-items: center;              /* Vertically center items */
      height: 200px;                    /* Assigns height to container */
      background-color: lightgray;      /* Assigns background color to container */
    }
    .item {
      background-color: skyblue;
      padding: 20px;
      margin: 10px;
      text-align: center;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

This will create a row of three items with space between them, aligned to the center of the container.

Summary Table

Property	What It Does
`display: flex`	Activates Flexbox layout
`flex-direction`	Defines the direction of items (row/column).
`justify-content`	Aligns items along the main axis (horizontal/vertical).
`align-items`	Aligns items along the cross axis (horizontal/vertical).
`align-content`	Aligns rows of items along the cross axis.
`flex-grow`	Defines how much an item should grow relative to others.
`flex-shrink`	Defines how much an item should shrink relative to others.
`flex-basis`	Defines the initial size of an item before space is distributed.
`flex`	Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.
`align-self`	Aligns individual items along the cross axis.
`flex-wrap`	Controls item wrapping (nowrap/wrap).

Practice Challenge

Create a responsive navbar using Flexbox:

Logo aligned to the left
Navigation menu centered
Profile/user icon on the right

Use justify-content and align-items to align the content properly.