How to make flexbox items with custom widths jump to available space - css

Question

I'm trying to achieve Pinterest-like layout, but with items of different percentage widths. Expected behaviour is pretty much like Javascript masonry plugin.
My flexbox code for some reason does not nake flexbox items jump side-by-side to another, event, when exact space is available.
Illustration of what I'm trying to achieve
demo on jsfiddle
https://jsfiddle.net/31v7et9f/1/
html
<div class="masonry">
<div class="item-1-4">item 25%</div>
<div class="item-1-1">item 100%</div>
<div class="item-3-4">item 75%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-1">item 100%</div>
</div>
css
* {box-sizing: border-box;}
/* parent */
.masonry {
display: flex;
flex-flow: column;
}
/* childs */
.masonry > div {
background: gray;
outline: solid 1px black;
height: 100px;
}
/* child sizes */
.item-1-1 {width: 100%;}
.item-3-4 {width: 75%;}
.item-1-2 {width: 50%;}
.item-1-4 {width: 25%;}

Answer 1

Flexbox items are by default layed out in the order they appear in the html. So, using your html and using flex-flow: row wrap; you'll get your 2 50%s side by side, but not your 75% and 25%.
/* parent */
.masonry {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
You could rearrange your html (do some math in javascript to determine which order they should be in to tile).
<div class="masonry">
<div class="item-1-1">item 100%</div>
<div class="item-1-4">item 25%</div>
<div class="item-3-4">item 75%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-1">item 100%</div>
</div>
You could also use order to group items that should be able to tile, though it's not perfect
/* child sizes */
.item-1-1 {
width: 100%;
-webkit-order: 1;
order: 1;
}
.item-3-4 {
width: 75%;
-webkit-order: 2;
order: 2;
}
.item-1-2 {
width: 50%;
-webkit-order: 3;
order:3;
}
.item-1-4 {
width: 25%;
-webkit-order: 2;
order:2;
}
https://jsfiddle.net/31v7et9f/2/

Answer 2

We can use flex-wrap: wrap; align-items: flex-stat; in parent flex class and child we can use flex: 1 auto; so that it consider available space and align automatically.
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-stat;
}
.fill-height-or-more
div {
flex: 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.some-area
div {
padding: 1rem;
}
.some-area
div:nth-child(1) {
background: rgba(136, 204, 102, 1);
}
.some-area
div:nth-child(2) {
background: rgba(121, 181, 210, 1);
}
.some-area
div:nth-child(3) {
background: rgba(140, 191, 217, 1);
}
.some-area
div:nth-child(4) {
background: rgba(159, 202, 223, 1);
}
.some-area
div:nth-child(5) {
background: rgba(179, 213, 230, 1);
}
.some-area
div h1, .some-area
div h2 {
margin: 0 0 0.2rem 0;
}
.some-area
div p {
margin: 0;
}
html, body {
height: 100%;
}
<section class="some-area fill-height-or-more">
<div>
<h1>Boxes That Fill Height (or more)</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</section>