Web development
Building a Wrapping Card Layout
Updated Oct 28, 2026
Flexbox can arrange cards in a row and wrap them when the available space is too narrow. Give cards a flexible basis, allow wrapping and set a gap. Test long text and narrow widths so cards remain rea
What you’ll learn
Learn to apply building a wrapping card layout in a practical situation.
Explanation
Flexbox can arrange cards in a row and wrap them when the available space is too narrow. Give cards a flexible basis, allow wrapping and set a gap. Test long text and narrow widths so cards remain readable.
Flexbox អាចរៀប cards ជាជួរ ហើយ wrap ពេលទំហំមិនគ្រប់។ កំណត់ទំហំបត់បែន និងចន្លោះ រួចសាកអត្ថបទវែង និងអេក្រង់តូច។
Worked example
CSS: .cards { display: flex; flex-wrap: wrap; gap: 1rem; } .card { flex: 1 1 15rem; }
Practice
- What does flex-wrap: wrap allow?
- Apply the idea to an example of your own and explain your choice.
Answers and guidance
Show answers / បង្ហាញចម្លើយ
- Cards can move to another line when there is insufficient space.
- Answers vary. Compare your example with the explanation and check each step.
Quick recap
Flexbox can arrange cards in a row and wrap them when the available space is too narrow.