Alaa Amer

CSS Flexbox: Complete Guide to Flexible Layout and Advanced Alignment

CSS Flexbox: Complete Guide to Flexible Layout and Advanced Alignment

Professional Guide by Alaa Amer – Expert Web Developer & Designer

Flexbox is a powerful layout system that solves traditional layout problems. Learn how to create flexible and responsive layouts with ease.

2️⃣ Element Direction (Flex Direction)

.direction-examples {
  display: flex;

  /* Different directions */
  flex-direction: row; /* horizontal - left to right (default) */
  flex-direction: row-reverse; /* horizontal reversed - right to left */
  flex-direction: column; /* vertical - top to bottom */
  flex-direction: column-reverse; /* vertical reversed - bottom to top */
}

/* Vertical card layout */
.card-column {
  display: flex;
  flex-direction: column;
  width: 300px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 20px;
  background: #007bff;
  color: white;
}

.card-body {
  flex: 1; /* takes remaining space */
  padding: 20px;
}

.card-footer {
  padding: 15px 20px;
  background: #f8f9fa;
}

4️⃣ Main Axis Alignment (Justify Content)

.justify-examples {
  display: flex;

  /* Horizontal alignment types */
  justify-content: flex-start; /* start (default) */
  justify-content: flex-end; /* end */
  justify-content: center; /* center */
  justify-content: space-between; /* equal spaces between elements */
  justify-content: space-around; /* spaces around elements */
  justify-content: space-evenly; /* perfectly equal spaces */
}

/* Practical applications */
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

.nav-actions {
  display: flex;
  gap: 10px;
}

/* Center content */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

6️⃣ Individual Element Control

Flex Grow, Shrink, Basis

.flex-item-control {
  /* Element growth */
  flex-grow: 1; /* grows to fill available space */
  flex-grow: 2; /* grows twice as fast as other elements */

  /* Element shrinking */
  flex-shrink: 1; /* shrinks when needed (default) */
  flex-shrink: 0; /* never shrinks */

  /* Base size */
  flex-basis: auto; /* based on content (default) */
  flex-basis: 200px; /* fixed size */
  flex-basis: 30%; /* percentage of container */

  /* Comprehensive shorthand */
  flex: 1; /* flex: 1 1 0% */
  flex: 0 0 200px; /* fixed size 200px */
  flex: 1 0 auto; /* grows only, doesn't shrink */
}

/* Practical examples */
.layout-sidebar {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px; /* fixed width 250px */
  background: #f8f9fa;
  padding: 20px;
}

.main-content {
  flex: 1; /* takes remaining space */
  padding: 20px;
}

.aside {
  flex: 0 0 200px; /* fixed width 200px */
  background: #f8f9fa;
  padding: 20px;
}

8️⃣ Practical Project: Flexible App Interface

The HTML and CSS remain the same as in the Arabic version, with appropriate text direction changes for English.

Summary

In this lesson we learned:

✅ Flexbox fundamentals and axes ✅ Element direction and wrapping ✅ Alignment on both axes ✅ Individual element control ✅ Using Gap for spacing ✅ Comprehensive practical project

In the next lesson we'll study CSS Grid for mastering complex grid layouts.

📩 Need help with Flexbox?