Is it possible to use flexbox to make the last item in this list visually move up and "pack" itself into the available space?
I am aware that achieving this layout could be done with different markup, such as using 3 columns and placing items within each column using floats or flexbox. However, I am curious if this specific layout can be achieved using flexbox with the current markup provided.
html,
body {
height: 100%;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.layout {
background-color: yellow;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.layout__item {
background-color: red;
width: 33.33%;
padding-right: 15px;
}
/* Every 3rd item. */
.layout__item:nth-child(3n) {
padding-right: 0;
}
/* Every item after the first 3. */
.layout__item:nth-child(n+4) {
padding-top: 15px;
}
.layout__item-content {
background-color: green;
height: 100%;
}
.layout__item-img {
background-color: blue;
height: 100%;
}<ul class="layout">
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height:300px"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quos voluptates impedit optio id, fugit, nobis assumenda eveniet, veniam deserunt eum magni. Voluptates quam, deserunt sit pariatur ducimus omnis eligendi!</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height:100px"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, saepe!</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height: 200px;"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia placeat quidem, illum cumque nisi repellat excepturi iusto aperiam tempore quam.</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height:150px;"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas natus odio quae nam officia libero.</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height: 321px;"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet.</div>
</div>
</li>
</ul>