panthro panthro - 2 months ago 13
CSS Question

Flexbox layout, wrapping issues

Im trying to build a layout with large and small blocks.

JSFiddle

<ul class="blocks">
<li class="large"><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
</ul>

.blocks{
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
}


The issue I am having is that I want block 4 and 5 to sit underneath 2 and 3. But in my fiddle they go on to a new line.

How can this be achieved?

Answer

You need change HTML structure and wrap small li's in another li > ul.

ul {
  list-style-type: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
ul > li {
  flex: 1;
}
ul ul li {
  flex: 0 0 50%;
}
img {
  width: 100%;
  vertical-align: top;
}
<ul class="blocks">
  <li class="large"><img src="http://placehold.it/350x250"></li>
  <li>
    <ul>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
    </ul>
  </li>
</ul>