Flex Wrapping & Gaps
What are Flex Wrapping & Gaps?
Imagine buying donuts. If you buy more donuts than fit in a single row inside your box, you don't squish them into paper-thin slices. Instead, you let them wrap to form a second row underneath.In CSS:
flex-wrap: By default, flex items will try to squeeze onto a single line (nowrap), shrinking until they overflow or break. Setting flex-wrap: wrap; allows items to wrap onto new rows when they run out of space.gap: Establishes empty space between neighboring items in the container, without needing to calculate complicated margins.Why does it matter?
Flex wrapping is key to building responsive photo galleries, tag lists, or product cards. When viewed on wide desktop screens, items flow side-by-side. On narrow mobile viewports, the items wrap automatically onto multiple vertical rows. Thegap property ensures clean spacing without margin hacks.
Syntax Breakdown
flex-wrap: wrap; — Allows items to wrap onto new lines.gap: 10px; — Adds 10px spacing between elements (both row-to-row and column-to-column).Common Mistakes
width: 300px; but forget to add flex-wrap: wrap; on the parent container, the browser will shrink your cards below 300px to keep them on one line, violating your design width.Quick Reference
flex-wrap: wrap — Allows items to wrap onto new rows/columns.gap — Shorthand for row-gap and column-gap spacing.Your Task
1. Allow items inside `.flex-grid` to wrap by setting `flex-wrap` to `wrap`.
2. Set the element spacing intervals to `10px` using the `gap` property.
index.html
Type code above to start the lesson.
Live Preview