I have a straightforward requirement: I need a list <ul /> containing items <div />s of the same fixed size. These items should be displayed from left to right, filling up all available space before wrapping onto the next line.
Below is the basic HTML structure:
<ul class="list-unstyled d-flex">
<li><div class="list-box"></div></li>
<li><div class="list-box"></div></li>
<li><div class="list-box"></div></li>
......
</ul>
The class .d-flex simply applies the following CSS rules:
.d-flex {
display: flex !important;
}
Similarly, the class .list-box controls the sizing properties of each box element within the list.
Currently, the boxes are laid out in a single row from left to right. If there are too many boxes to fit on the screen width, the <ul /> container gains a horizontal scroll bar.
Check out this working example:
.list-box {
height: 100px;
width: 100px;
border: 1px solid black;
margin: 2px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h1>Bootstrap 4 Flex List</h1>
<ul class="list-unstyled d-flex">
<li>
<div class="list-box"></div>
</li>
<li>
<div class="list-box"></div>
</li>
<li>
<div class="list-box"></div>
</li>
........
</ul>However, the <li /> elements do not wrap to the next line. Why is that happening?