Flexbox behaviour goes against its philosophy - html

Question

I'm new to this topic and read myself into it. I worked through this guide.
In this guide they say:
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
I want Flexbox to use all available space, but obviously right under 2 there is empty space and also enough space for the element 3.
When I take a look at the philosophy of Flexbox I can see not used but available space in my layout.
Am I doing something wrong in my css or is Flexbox broken?
Layout/Output
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
-webkit-flex-flow: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 300px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
HTML
<ul class="flex-container">
<li class="flex-item">1111111111 1111111111</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>
</ul>

Answer 1

Flexbox is primarily a one-dimensional layout mode. It lets you distribute & size elements responsively, in just a single axis (horizontal or vertical), and then it supports basic alignment/stretching in the other axis.
flex-wrap: wrap can make it look two-dimensional, but really it just lets you split your flex items into "lines", where each "line" is like a one-dimension flexbox. And the lines don't overlap (or really interact at all).
So, in your diagram, the "3" element doesn't fill in the empty space because it's in a separate flex line from where the empty space is, and the flex lines cannot overlap.
To achieve what you want in pure CSS, I think you'll need CSS Grid, specifically with grid-auto-flow: dense. This spec is still under active development, though, and browsers have mixed levels of implementation, so it's not ready for use in production websites yet.

Answer 2

Yes, your CSS is slighty wrong
JSFiddle Demo
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap; /* here */
}
.flex-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background: tomato;
padding: 5px;
width:300px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
However, on further discussion it appears that what you are trying to achieve is not possible (AFAIK) with flexbox.
I expect element 3 to move under 2, so all the empty space is used
Accordingly, I think a JS solution like Masonry.Js would be the recommended solution.