5. Flexbox Deep Dive

Level: IntermediateDuration: 55m

Introduction to Flexbox

Flexbox is a powerful CSS layout module designed to align and distribute space among items in a container. Unlike traditional block layouts, Flexbox makes it easy to create flexible and responsive designs without using floats or positioning hacks.

css

/* Flex container example */
div.container {
  display: flex; /* or inline-flex */
}

Flex containers have a main axis (default horizontal) and a cross axis (default vertical). Items align along these axes based on container and item properties.

Flex Container Properties

Flex containers control the layout behavior of all direct child items using properties like direction, wrapping, alignment, and spacing.

css

/* Flex direction */
div.container {
  flex-direction: row;      /* row, row-reverse, column, column-reverse */
  flex-wrap: wrap;          /* nowrap, wrap, wrap-reverse */
  justify-content: center;  /* flex-start, flex-end, center, space-between, space-around, space-evenly */
  align-items: stretch;     /* flex-start, flex-end, center, baseline, stretch */
  align-content: space-between; /* only affects multi-line containers */
  gap: 20px;                /* spacing between items */
}

`flex-direction` determines the main axis.
`flex-wrap` allows items to move to new lines when space is limited.
`justify-content` aligns items along the main axis.
`align-items` aligns items along the cross axis.
`align-content` manages spacing between multiple rows.
`gap` adds consistent spacing between flex items.

Flex Item Properties

Each child of a flex container can have its own properties to control growth, shrinkage, basis size, alignment, and order.

css

/* Flex item example */
div.item {
  flex-grow: 1;      /* item can grow to fill space */
  flex-shrink: 1;    /* item can shrink if needed */
  flex-basis: 200px; /* initial main size */
  flex: 2 1 200px;   /* shorthand: grow shrink basis */
  align-self: center; /* override container align-items */
  order: 2;          /* position relative to other items */
}

`flex-grow` defines how much an item can expand relative to others.
`flex-shrink` defines how an item reduces size if space is constrained.
`flex-basis` sets the initial size before growing or shrinking.
`flex` shorthand combines grow, shrink, and basis.
`align-self` overrides the container’s `align-items` for a single item.
`order` rearranges items visually without changing HTML.

Mini Project Step

Build a responsive card layout using Flexbox. The container should wrap cards onto multiple lines if needed. Each card should grow to fill available space and have varied alignment to demonstrate `align-self`. Add spacing between cards using `gap` and reorder one item using `order`.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Project</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
  }
  .card {
    flex: 1 1 200px;
    padding: 20px;
    border: 2px solid #3498db;
    border-radius: 10px;
    background-color: #ecf0f1;
    text-align: center;
  }
  .card.highlight {
    align-self: center;
    order: -1;
    background-color: #f9e79f;
  }
</style>
</head>
<body>
<div class="container">
  <div class="card">Card 1</div>
  <div class="card highlight">Card 2 (Highlighted)</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>
</body>
</html>

MDN Flexbox Guide

Page

Introduction to Flexbox

Flex Container Properties

Flex Item Properties

Mini Project Step