Arrange Cards with Flexible Layouts
Use flexbox to distribute space without hard-coding positions.
By BizAIPro Learning · Prerequisites: Understand the CSS Box Model
What you will learn
- Choose a flexible container
- Allow children to wrap
- Use gap consistently
Choose one layout responsibility
Flexbox arranges children along a main axis. A row of actions or small collection of cards is a good use case. The parent controls how children share available space; each child can describe its preferred size. Avoid absolute positioning for ordinary document layout.
Explain flex values
In flex: 1 1 14rem, the first value allows growth, the second allows shrinking and the basis is the preferred starting size. The basis is not a guarantee. With wrapping enabled, a child can move to another row when the available width is insufficient.
Use consistent spacing
gap creates space between children without extra spacing on the outer edges. Padding on the parent controls outer breathing room. These two responsibilities remain separate, making the layout easier to reason about. Test one card, three cards and a card with a much longer title.
Check real constraints
A flexible parent cannot shrink a child that insists on a large minimum size. min-width: 0 on an appropriate child can allow long content to wrap. Check readability and order before optimizing visual alignment. The source order should remain a sensible keyboard and reading order.
Read the example
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 14rem; min-width: 0; padding: 1rem; border: 1px solid #cbd5e1; }Line-by-line explanation
- display:flex establishes the layout.
- flex-wrap permits additional rows.
- gap controls space between cards.
- min-width:0 permits shrinking content boxes.
Expected output
Cards share each row and wrap when space becomes limited.
Common mistakes to avoid
- Positioning cards with left and top offsets
- Disabling wrapping on a narrow screen
- Reordering visual content into a confusing reading order
Make a change. See what happens.
HTML/CSS renders in a script-free preview. JavaScript runs in a separate, time-limited console worker with network access blocked. DOM scripting and package imports are not supported. Browser memory limits still depend on your device.
Page preview
Render your code to see the page.
Allow a card row to wrap
Write a .cards rule with display: flex, flex-wrap: wrap and gap: 1rem.
What permits flex items to move onto another line?
Summary & next step
- Can you now choose a flexible container?
- Can you now allow children to wrap?
- Can you now use gap consistently?
Complete the exercise and pass the knowledge check to complete this lesson. Guest progress stays on this browser and does not sync across devices.