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.
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; }