Can flexbox be used to "pack" items in a list?

Question

Using flexbox, and based on the following markup, is it possible to get the last item in the list to visually move up and "pack" itself into the available space?

I know this could be accomplished with different markup (3 columns and items within each column), using either floats or flexbox, but I am curious if this is something flexbox can do with this markup.

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>

Do you mean collapse only the last list item--all the others remain at their designated heights? — markE, Apr 28 '15 at 20:59
@markE I mean the last item fills the empty space in the second column, basically a masonry layout. — Evan Dull, Apr 29 '15 at 19:32

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

The answer to this question is quite simply no.

A good explanation as to why is available on a similar question: Horizontal masonry layout with flexbox CSS only

edited May 23 '17 at 11:48

Community

1
1

answered Apr 29 '15 at 19:34

Evan Dull

108
4

Can flexbox be used to "pack" items in a list?

1 Answers1