How can you make flex items wrap onto multiple lines?

Q: How can you make flex items wrap onto multiple lines?

The `flex-wrap` property in CSS determines whether flex items should stay on a single line or wrap onto multiple lines when they exceed the container’s available space. It allows for more responsive and adaptive layouts by controlling how items flow within a flex container. `nowrap` (default): All flex items are kept on a single line, even if they overflow the container. `wrap`: Flex items wrap onto multiple lines from top to bottom (in a horizontal layout). `wrap-reverse`: Flex items wrap onto multiple lines from bottom to top (in a horizontal layout). .container { display: flex; flex-wrap: wrap; width: 400px; border: 1px solid #ccc; } .item { background-color: #3498db; color: white; padding: 20px; margin: 10px; flex: 1 1 150px; text-align: center; } Item 1 Item 2 Item 3 Item 4 Item 5 In this example, when the total width of the flex items exceeds the container width, `flex-wrap: wrap` causes the extra items to move to the next line instead of overflowing. Use `flex-wrap: wrap` to make layouts responsive and avoid overflow issues. Combine `flex-wrap` with `align-content` to control spacing between multiple flex lines. Avoid `nowrap` when working with fixed-width items in smaller viewports to prevent content clipping.

Difficulty: 3/10

flex-wrap, line-breaking, responsive layout

Understanding the flex-wrap Property in Flexbox

The flex-wrap property in CSS determines whether flex items should stay on a single line or wrap onto multiple lines when they exceed the container’s available space. It allows for more responsive and adaptive layouts by controlling how items flow within a flex container.

Available Values of flex-wrap

1
nowrap (default): All flex items are kept on a single line, even if they overflow the container.
2
wrap: Flex items wrap onto multiple lines from top to bottom (in a horizontal layout).

How can you make flex items wrap onto multiple lines?

Difficulty: 3/10

flex-wrap, line-breaking, responsive layout

Understanding the flex-wrap Property in Flexbox

Available Values of flex-wrap

1
nowrap (default): All flex items are kept on a single line, even if they overflow the container.
2
wrap: Flex items wrap onto multiple lines from top to bottom (in a horizontal layout).

How can you make flex items wrap onto multiple lines?

Understanding the flex-wrap Property in Flexbox

How can you make flex items wrap onto multiple lines?

Understanding the flex-wrap Property in Flexbox

Scenario Questions

Follow-up Questions