The flex-wrap Property

On the previous page we saw that by setting display: flex a quick flexbox based layout can be achieved. When you have created a flex container element with display: flex there are a range of other flexbox specific properties you can then use. We’ll just introduce one of them here – that is flex-wrap.

As the name implies you can use flex-wrap to control the way flex item wrap inside of a flex container. As such flex-wrap has values of nowrap (default), wrap and wrap-reverse.

Where flex-wrap is particularly useful is where you wish to create a grid layout from repetitive content. For example you might have some HTML as follows:

<div class="main">
    <div>Some Box Content here</div>
    <div>Some Box Content here</div>
    <div>Some Box Content here</div>
    <div>Some Box Content here</div>
    <div>Some Box Content here</div>
</div>

If we have a set of div elements that are all children of an element that has been made a flex container, all the elements will try and fit on one line.

View Demo with No Wrap

By adding a flex-wrap value of wrap we can have the flex items wrap within the flex container.

.main{
	display: flex;
	flex-wrap: wrap;
}

View Demo with Wrap