Wrapping your Flexbox
By default all of your child boxes will try to fit onto one line. If you have a layout with several boxes, this may not be the look you want. If this is the case, you can use the flex-wrap
property to wrap the child boxes as needed. Let's add more boxes to our original code with the following HTML:
<div class="parent"> <div class="child"> 1 </div> <div class="child"> 2 </div> <div class="child"> 3 </div> <div class="child"> 4 </div> <div class="child"> 5 </div> <div class="child"> 6 </div> <div class="child"> 7 </div> <div class="child"> 8 </div> <div class="child"> 9 </div> </div>
We now have nine boxes in our parent container. That should give us enough to work with to create a nice wrapping effect. Before we see what this ...
Get Bootstrap 4 – Responsive Web Design now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.