What is the purpose of the gap property in Flexbox?

Q: What is the purpose of the gap property in Flexbox?

The `gap` property in Flexbox is used to define consistent spacing between flex items without the need for margins on individual items. It simplifies layout spacing and avoids margin collapse issues. `gap: ;` sets the spacing between all flex items along the main and cross axes. Supports `row-gap` and `column-gap` for specifying different spacing in rows and columns. Works with both `flex` and `grid` containers. .container { display: flex; gap: 20px; border: 1px solid #ccc; padding: 10px; } .item { background: #3498db; color: white; padding: 20px; text-align: center; } Item 1 Item 2 Item 3 In this example, `gap: 20px` ensures that all items inside the flex container have a uniform 20px spacing between them without adding individual margins.

Difficulty: 3/10

flexbox layout, spacing control, responsive design

Understanding the gap Property in Flexbox

The gap property in Flexbox is used to define consistent spacing between flex items without the need for margins on individual items. It simplifies layout spacing and avoids margin collapse issues.

Key Points

1
gap: <length>; sets the spacing between all flex items along the main and cross axes.
2
Supports row-gap and column-gap for specifying different spacing in rows and columns.
3
Works with both flex and grid containers.

Example: Using gap in Flexbox

In this example, gap: 20px ensures that all items inside the flex container have a uniform 20px spacing between them without adding individual margins.

Scenario Questions

0-2 years experience

Follow-up Questions