Arrange Content with Flexbox

Create a folder for this example and add two files beside each other: index.html and styles.css. The HTML links to the stylesheet and provides the Resource library content used throughout this tutorial.

index.html

styles.css

Flexbox is a one-dimensional layout system: it arranges flex items along one main axis, making it useful for rows and columns.

Add display: flex to .resources. This element becomes the flex container. Its three direct <article> children become flex items.

A heading, paragraph, or link inside an article is nested content. It does not automatically become a flex item of .resources.

Replace the existing .resources rule in styles.css with this rule, then save and refresh the browser.

A flex container has two directions: the main axis, where its flex items are arranged, and the cross axis, which is perpendicular to it.

In this tutorial’s left-to-right horizontal writing:

• flex-direction: row is the default. The main axis runs horizontally; the cross axis runs vertically.
• flex-direction: column makes the main axis run vertically; the cross axis runs horizontally.

“Main” means the direction selected for arranging items. It does not always mean horizontal.

The Resource library cards are direct children of .resources, so flex-direction controls whether those cards form a row or a vertical stack. You do not need to change their HTML sequence.

Because row is the default, add flex-direction only when you want the stacked arrangement.

Add this declaration to the existing .resources rule when the cards should stack from top to bottom. Save styles.css, then refresh your local browser.

With flex-direction: row, the main axis runs horizontally. If the cards occupy less than the container’s available width, the remainder is free space. justify-content positions the card group or distributes that free space along the main axis.

It affects flex items, not the text inside a card. The comparison below uses the same three cards and the same container; only the handling of main-axis free space changes.

align-items works on the cross axis. In a row, that axis is vertical.

• stretch is the default. A flex item with an automatic cross-axis size can stretch to the flex line’s cross size.
• flex-start places cards at the top cross-axis edge.
• center places cards halfway between the top and bottom edges.

Stretch is most visible when cards have automatic heights. It does not override an explicit cross-axis size. A container also needs extra cross-axis space before top or center placement becomes visible.

Replace the earlier .resources and .resource-card rules with these temporary comparison rules. flex-direction: row explicitly replaces the column direction used in the previous step. The fixed height only makes cross-axis centering easy to inspect.

gap creates a gutter between neighboring flex items. It does not add space between the first or last card and the container edge; container padding provides that outer space.

A declared gap remains present with space-between. However, space-between also distributes any remaining main-axis free space between cards. The visible separation can therefore be larger than the declared gap.

Replace the temporary comparison rules with this combined row arrangement. It keeps the explicit row direction, so the first property controls horizontal distribution and the second controls vertical alignment.

One line is the default

A flex container uses one flex line by default: flex-wrap: nowrap. In a row, this keeps all three flex items on the same line. It does not promise that an authored width remains unchanged: when the line is too narrow, items may become narrower within their size constraints rather than move to another line.

For a controlled comparison, give .resources a 30rem content width. The existing cards use the default content-box sizing. Each width: 12rem card also has 1rem padding and 0.125rem borders on both sides, so its outer width is 14.25rem.

For this comparison, replace the current .resources and .resource-card rules with these temporary rules. The 30rem width is the container's content width; its padding and border remain outside that measurement.

Permit another flex line

Add flex-wrap: wrap when cards should form additional lines instead of remaining on one crowded row.

Here, two card outer widths require 28.5rem (14.25rem each). With their 1rem gutter, the first line needs 29.5rem, so two cards fit in the 30rem available content width. A third card does not fit and starts a second line.

gap works in both directions: it separates neighboring cards on a line and separates wrapped lines. Each line is laid out independently. With justify-content: flex-start, the lone final card begins at the main-axis start; it does not reserve an empty shared column beside it.

Add the wrapping declaration to the temporary .resources rule, then save styles.css and refresh your browser.

flex-basis gives each flex item a preferred starting size on the main axis. In this row layout, 12rem is the preferred starting width for each resource card.

It is a starting point, not a promise about the final width. When a flex line has positive free space, flex-grow determines whether—and by what proportion—items receive some of that space.

Use flex-grow only to describe how positive free space is shared on one flex line. A value of 0 leaves an item out of growth. Positive values are relative shares: a factor of 2 receives twice the added space of a factor of 1.

This ratio applies to added space—not to final card widths. If every card starts at 12rem, the featured card’s final width includes its own 12rem starting size plus its larger added share. Wrapped lines resolve their available space independently, so a card alone on a last line can grow.

Replace the temporary .resources and .resource-card rules from the wrapping comparison with these demonstration rules. The first card already has the resource-card--featured class.

When a flex line runs short of space

flex-shrink controls whether a flex item participates in becoming smaller when the items on one flex line do not fit.

• flex-shrink: 0 keeps that item out of shrinkage.
• flex-shrink: 1 lets it shrink, subject to minimum-size constraints.

A shrink factor is a participation factor, not a number of pixels. Two items with the same factor can lose different pixel amounts when their starting sizes differ.

The flex shorthand lists three components in this order:

grow → shrink → basis

The basis is the preferred starting main-axis size used in the previous step. The first two numbers state whether an item can receive positive free space or help resolve a shortage of space.

For a temporary comparison, replace the sizing declarations from the previous step with these rules. Keep the existing .resources rule, including its 48rem width, wrapping, and 1rem gap.

A card can be allowed to shrink and still stop sooner than expected. In this row, flex: 1 1 12rem permits shrinking, but a flex item also has an automatic minimum width based on its content.

A non-wrapping heading makes that content-based minimum wider because its whole phrase must stay on one line. At the 42rem test width below, a card box can therefore resist shrinking and extend the row beyond its container. This is a box-size constraint; it does not mean that Flexbox ignored flex-shrink.

For a temporary local comparison, replace the current .resources, .resource-card, and .resource-card--featured rules with these rules. The 42rem content width is narrower than the three cards' preferred outer widths plus two gutters, but is wide enough for the longest individual heading word after normal wrapping is restored.

Repair the box and the text as separate concerns. Apply min-width: 0 to the constrained flex item—here, each .resource-card. This permits its box to become narrower than its automatic minimum width.

That change alone does not make a non-wrapping heading readable: the box can shrink while its heading still paints outside it. Restore white-space: normal so ordinary heading words can wrap within the smaller card.

Removing a no-wrap rule can resolve some layouts by itself. Conversely, min-width: 0 is a targeted flex-item safeguard, not a universal fix for every kind of overflow.

Keep the temporary .resources rule from the previous screen. Replace the card and title rules with these readable-shrink rules.

The HTML source sequence is the document order. It provides the meaningful reading sequence and, for the cards’ native links, the expected sequence when a keyboard user presses Tab.

Flexbox can change where cards appear without changing that source sequence. When visual placement differs from document order, a person reading left to right may encounter cards in a different sequence from a keyboard user.

Two Flexbox features can create a mismatch:

• flex-direction: row-reverse reverses visual placement along a row.
• flex-direction: column-reverse reverses visual placement in a column.
• order changes a flex item’s visual placement relative to its siblings.

None of them moves an <article> in the HTML. Native link focus still follows the source. Avoid visual reordering when it would make the page’s meaningful sequence unclear.

Temporary comparison: add this to the current .resources rule, save, and refresh your browser.

Separate comparison: first restore flex-direction: row, then temporarily add this rule, save, and refresh. Do not combine this comparison with row-reverse.

For this Resource library, preserve the established document order: HTML reference, CSS layout notes, then Accessibility checklist.

Delete any temporary reverse-direction declaration and any order override. A normal row lets the visual sequence match the document sequence. Wrapping and gap adapt the layout without changing its meaning.

Use this normal container arrangement after removing the temporary visual-reordering rules. Keep your existing card sizing and readable text rules.

Replace the temporary comparison rules with the complete final local page. Keep index.html and styles.css in the same folder. The articles remain in meaningful document order, and each link points to a destination in this file.

index.html

This stylesheet makes .resources a wrapping flex container with a 1rem gutter. Every card starts from a 12rem preferred size, can grow and shrink, and may shrink below its automatic minimum when needed. The featured card receives a larger share of extra space on a line, while normal wrapping keeps text visible.

styles.css