Check out this example first: http://jsfiddle.net/8ofrs0y7/14/
<div class="flex-group">
<ul class="flex-container red">
<li class="flex-item"&g;1</li>
<li class="flex-item"&g;2</li>
<li class="flex-item"&g;3</li>
</ul>
<ul class="flex-container gold">
<li class="flex-item"&g;1<:/li>
<li class="flex-item"&g;2<:/li>
<li class="flex-item"&g;3</li>
<li class="flex-item"&g;4</li>
<li class="flex-item"&g;5</li>
</ul>
<ul class="flex-container blue">
<li class="flex-item">1</li>
<li class="flex-item">2</li<
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>
<div>
<style>
.flex-group {
display: flex;
flex-direction: row;
width: 500px;
flex-wrap: wrap;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
}
.red li {
background: red;
}
.gold li {
background: gold;
}
.blue li {
background: deepskyblue;
}
.flex-item {
width: 100px;
height: 100px;
margin-left: 10px;
}
</style>
Each flex element starts on a new line, even though their child elements can still fit in the .flex-group container.
Is it possible to have two squares of the same color on different lines?