Flexbox Properties & Examples (justify-content, align-items, etc.)

Table of Contents

1. Introduction
2. Flex Container vs Flex Item Recap
3. Main Flexbox Properties Overview
4. Flex Container Properties with Examples
   • display
   • flex-direction
   • flex-wrap
   • justify-content
   • align-items
   • align-content
5. Flex Item Properties with Examples
   • order
   • flex-grow
   • flex-shrink
   • flex-basis
   • flex
   • align-self
6. Real-World Examples
7. Tips and Best Practices
8. Conclusion

1. Introduction

CSS Flexbox is designed to layout elements in a one-dimensional flow (either row or column). It simplifies alignment, spacing, and distribution of elements in a container—even when their sizes are dynamic or unknown. This module breaks down each Flexbox property, explains how and when to use them, and provides visual, real-world examples.

2. Flex Container vs Flex Item Recap

Before diving into properties, it’s essential to recall two primary roles in Flexbox:

• Flex Container: The element with display: flex or display: inline-flex.
• Flex Items: The direct children of the flex container.

3. Main Flexbox Properties Overview

Flexbox properties are divided into two categories:

• Container-level: Apply to the flex container and affect the layout and alignment of all items.
• Item-level: Apply to individual items and define how they behave within the flex container.

4. Flex Container Properties with Examples

display

Activates Flexbox layout.

cssCopyEdit.container {
  display: flex; /* or inline-flex */
}

flex-direction

Specifies the direction of the main axis.

cssCopyEdit/* Options: row | row-reverse | column | column-reverse */
.container {
  flex-direction: row;
}

• row: Left to right (default)
• row-reverse: Right to left
• column: Top to bottom
• column-reverse: Bottom to top

flex-wrap

Allows items to wrap to the next line.

cssCopyEdit.container {
  flex-wrap: wrap; /* or nowrap (default), wrap-reverse */
}

justify-content

Aligns items along the main axis.

cssCopyEdit.container {
  justify-content: space-between;
}

Example:

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

htmlCopyEdit<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

align-items

Aligns items along the cross axis.

cssCopyEdit.container {
  align-items: center;
}

align-content

Aligns multiple lines of content when wrapping is enabled.

cssCopyEdit.container {
  flex-wrap: wrap;
  align-content: space-between;
}

5. Flex Item Properties with Examples

order

Defines the order of appearance.

cssCopyEdit.item {
  order: 2;
}

Items with smaller values appear first.

flex-grow

Defines how much an item will grow relative to others.

cssCopyEdit.item {
  flex-grow: 1;
}

Items with higher flex-grow values grow faster.

flex-shrink

Defines how much an item will shrink relative to others.

cssCopyEdit.item {
  flex-shrink: 1;
}

flex-basis

Defines the initial size before growing or shrinking.

cssCopyEdit.item {
  flex-basis: 200px;
}

flex (shorthand)

Shorthand for flex-grow, flex-shrink, and flex-basis.

cssCopyEdit.item {
  flex: 1 0 150px;
}

align-self

Overrides align-items for individual items.

cssCopyEdit.item {
  align-self: flex-start;
}

6. Real-World Examples

Centering a Box Vertically and Horizontally

cssCopyEdit.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

htmlCopyEdit<div class="container">
  <div class="box">Centered!</div>
</div>

Navigation Bar with Space Between Items

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

htmlCopyEdit<div class="navbar">
  <div>Logo</div>
  <div>Links</div>
  <div>Search</div>
</div>

7. Tips and Best Practices

• Use gap for spacing: It’s cleaner than using margins. cssCopyEdit.container { display: flex; gap: 20px; }
• Combine Flexbox with Media Queries for responsive behavior.
• Avoid nested flex containers unless necessary; it can cause layout complexity.
• Use shorthand flex instead of setting grow, shrink, and basis separately for brevity.

8. Conclusion

Flexbox is one of the most intuitive and powerful tools in modern CSS for aligning and distributing space within layouts. Mastering its core properties—like justify-content, align-items, flex-grow, and order—is essential for any frontend developer. Whether you’re building simple components or responsive UI systems, Flexbox ensures that your layouts are both flexible and robust.