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.

1️⃣ Flexbox Fundamentals

Creating a Flex Container

.flex-container {
  display: flex; /* Convert element to flex container */

  /* Or for inline elements */
  display: inline-flex;
}

/* Child elements automatically become flex items */
.flex-item {
  /* No need to specify display for child elements */
}

Axes in Flexbox

.flex-axes-demo {
  display: flex;

  /* Main Axis */
  /* - Default: horizontal left to right */
  /* - Can be changed with flex-direction */

  /* Cross Axis */
  /* - Perpendicular to main axis */
  /* - Vertical by default */
}

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;
}

3️⃣ Element Wrapping (Flex Wrap)

.wrap-examples {
  display: flex;

  /* Wrap types */
  flex-wrap: nowrap; /* no wrapping (default) */
  flex-wrap: wrap; /* wrap to next line */
  flex-wrap: wrap-reverse; /* reverse wrapping */

  /* Shorthand for direction and wrap */
  flex-flow: row wrap; /* flex-direction + flex-wrap */
  flex-flow: column nowrap;
}

/* Responsive grid using flex-wrap */
.responsive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.grid-item {
  flex: 1 1 300px; /* grow and shrink, minimum 300px */
  min-width: 300px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

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;
}

5️⃣ Cross Axis Alignment (Align Items)

.align-examples {
  display: flex;
  height: 200px; /* specific height to see effect */

  /* Vertical alignment types */
  align-items: stretch; /* stretch (default) */
  align-items: flex-start; /* start (top) */
  align-items: flex-end; /* end (bottom) */
  align-items: center; /* center */
  align-items: baseline; /* baseline */
}

/* Align single item only */
.special-item {
  align-self: flex-end; /* overrides container setting */
}

/* Flexible card layout */
.feature-cards {
  display: flex;
  gap: 20px;
  align-items: stretch; /* all cards same height */
}

.feature-card {
  flex: 1;
  padding: 30px 20px;
  background: white;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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;
}

7️⃣ Gap - Spacing Between Elements

.gap-examples {
  display: flex;

  /* Comprehensive spacing */
  gap: 20px;

  /* Different spacing for rows and columns */
  row-gap: 15px;
  column-gap: 25px;

  /* Or using shorthand */
  gap: 15px 25px; /* row-gap column-gap */
}

/* Alternative to gap for older browsers */
.legacy-spacing {
  display: flex;
  margin: -10px; /* negative margin */
}

.legacy-spacing > * {
  margin: 10px; /* positive margin for each element */
}

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?