One of the defining features of Flexbox is how it inherently handles empty space. By default, if you dump ten large items into a standard `.d-flex` container, the browser will forcefully squeeze and shrink those items horizontally so they all perfectly fit onto a single line without dropping down.
Sometimes you don't want them to crush together! If you are building a product page or a photo gallery, you actually want the items to drop seamlessly onto a new row below when the page gets too narrow. We control this behavior using the Wrap utilities!
There are three simple CSS classes determining the wrap flow of any flexbox container:
.flex-nowrap: The rigid default setting. Items will aggressively shrink and smash against each other to forcibly remain on exactly one horizontal line..flex-wrap: The responsive setting. When items hit the right wall of the container, they gracefully drop down to start a brand new horizontal line below!.flex-wrap-reverse: Items drop onto a new line, but they stack upwards instead of downwards!Below, we have precisely restricted the parent flex container to a strict maximum width of 400px. We placed five large blocks inside it. Because the blocks naturally require more space than the container allows, we can see exactly how the wrap rules dictate the layout!
Notice how the browser crushes the blocks brutally to force them to fit horizontally
The blocks hit the wall and safely drop to the next line naturally!
The blocks hit the wall but stack upwards physically!
<!-- Squeeze all elements onto one line universally -->
<div class="d-flex flex-nowrap">...</div>
<!-- The standard technique for building dynamic, grid-like UI layouts! -->
<div class="d-flex flex-wrap">
<div>Image 1</div>
<div>Image 2</div>
<div>Image 3</div>
<div>Image 4</div>
</div>