01 | ARRANGE A GROUP OF ITEMS

Your club page has three project cards. You want them beside each other when there is room, with sensible spacing and a layout that can adapt on a narrow screen.

Flexbox is a one-dimensional layout system. It arranges items along a main axis, as a row or column. It can wrap into additional lines, but each line distributes its space independently.

Flexbox is useful for navigation, toolbars, rows of cards and aligned content. CSS Grid, covered next, is useful when you want explicit control over rows and columns together.

02 | CONTAINER AND DIRECT CHILDREN

<div class="projects">
  <article class="project-card">Delivery robot</article>
  <article class="project-card">Robot hand</article>
  <article class="project-card">Sensor station</article>
</div>

.projects {
  display: flex;
  gap: 16px;
}

display: flex makes projects a flex container. Its direct child articles become flex items. The paragraphs or images inside those articles do not automatically become flex items of projects.

Place container-level layout properties on the parent. Put item-level sizing or individual alignment properties on the relevant children.

03 | MAIN AXIS AND CROSS AXIS

.projects {
  display: flex;
  flex-direction: row;
}

flex-direction establishes the main axis. row follows the inline direction; column follows the block direction. The cross axis runs perpendicular to it.

In a typical English horizontal writing layout:

• row: main axis is horizontal and cross axis is vertical.
• column: main axis is vertical and cross axis is horizontal.

Use the axis names rather than memorising “justify means horizontal”. The axes change with direction, and writing direction can change what start and end mean.

04 | JUSTIFY-CONTENT DISTRIBUTES MAIN-AXIS SPACE

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

justify-content controls how items are placed along the main axis, especially when there is spare space.

• flex-start: group items at the main-start edge.
• center: group them in the centre.
• flex-end: group them at the main-end edge.
• space-between: distribute spare space between items.

gap sets a consistent gutter. space-between distributes remaining space, so the final distance between items can exceed the gap.

If flexible items grow to consume all available space, there may be no spare main-axis space for justify-content to distribute.

05 | ALIGN-ITEMS WORKS ON THE CROSS AXIS

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

align-items controls cross-axis alignment of the items within their flex line. Common choices include stretch, flex-start, center and flex-end.

stretch can make items with an automatic cross size fill the line’s cross size, subject to their constraints. A definite cross size can prevent stretching.

In a row, align-items: center commonly aligns items vertically. In a column, it commonly aligns them horizontally. A visible difference requires room in the relevant axis.

.featured {
  align-self: flex-end;
}

align-self changes cross-axis alignment for one item, overriding the container’s align-items for that item.

06 | GAP AND WRAPPING

.projects {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

The default flex-wrap is nowrap. wrap allows items to move onto another line when their sizes cannot fit on the current one. Items can also shrink depending on their flex settings and minimum sizes.

gap creates gutters between items or lines without adding an outer gutter around the container. Container padding can supply that outer space.

align-content distributes multiple flex lines across spare cross-axis space. It is different from align-items, which aligns items within their lines. Use align-content when you have an appropriate multi-line container and spare cross-axis room.

07 | LET ITEMS GROW OR SHRINK

.project-card {
  flex: 1 1 220px;
}

The three parts are flex-grow, flex-shrink and flex-basis.

• 1 grow: the item can receive a share of positive free space.
• 1 shrink: it can shrink when space is short, subject to minimum-size constraints.
• 220px basis: a starting size used in main-axis sizing.

A grow factor is a ratio for distributing free space, not a promise that an item’s final width will be a simple ratio of another item’s width. Shrink calculations also account for the basis sizes.

flex: 1 is a common shorthand for flexible items with a zero basis, but do not assume every item becomes equal regardless of content and constraints.

08 | BUILD AN ADAPTABLE CARD ROW

.projects {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.project-card {
  box-sizing: border-box;
  flex: 1 1 220px;
  min-width: 0;
  padding: 20px;
  border: 2px solid #24988f;
  overflow-wrap: anywhere;
}
.project-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

Each card starts from a 220px basis and can grow or shrink. Wrapping creates another line when appropriate. min-width: 0 can allow an item to shrink below its automatic content-based minimum in this row layout.

Long words and large images can still cause overflow, so the example also wraps long text and constrains images. Test the real content.

Because lines distribute space independently, the final row may have wider cards. Use Grid later if you want stricter column alignment across rows.

09 | TRY IT: CHANGE THE AXES

Change direction, main-axis distribution and cross-axis alignment. The preview labels the items and keeps a fixed demonstration height so the alignment differences are visible.

10 | KEEP READING ORDER LOGICAL

row-reverse, column-reverse and the order property can change visual placement without changing the source order used by reading and sequential keyboard navigation.

Keep meaningful HTML order and avoid visual rearrangements that make keyboard focus appear to jump unpredictably. Use layout to support the content, not to hide structural problems.

1. Identify the flex container and its direct children.
2. Check the chosen main and cross axes.
3. Check available space, item sizes and minimum constraints.
4. Review wrap and overflow with real content.
5. Test narrow screens, enlarged text and keyboard navigation.