HTML & CSS Interview Question #92

What does flex-wrap do?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

flex-wrap controls whether flex items remain on a single flex line or can wrap onto additional lines when there is insufficient main-axis space. The default is nowrap.

Detailed Explanation

flex-wrap controls whether flex items remain on a single flex line or can wrap onto additional lines when there is insufficient main-axis space. The default is nowrap.

flex-wrap: wrap is useful for toolbars, tags, cards, and other interfaces where items should move onto new lines on smaller screens. Multi-line flex layouts also introduce properties such as align-content for distributing flex lines.

Code Example

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tag {
    flex: 0 0 auto;
}