2

I have boxes in which I'm using flexbox for their layout. Flexbox makes the rows 'organized'. Meaning, if 1 box's height is larger than all the others, all the boxes on the second row get pushed down, and there is space under the boxes first row that have a smaller height.

Here's an image of what I mean:

enter image description here

There's space under box #01 because box #2 has a larger height. I want box #4 to go right under box #1.

How can I make a all boxes to fill up space right above them?

JSFiddle

#wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 400px;
}
.tile {
  background-color: lightblue;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 10px;
}
#n2 {
  height: 200px;
}
<div id="wrapper">
  <div class="tile" id="n1">01</div>
  <div class="tile" id="n2">02</div>
  <div class="tile" id="n3">03</div>
  <div class="tile" id="n4">04</div>
  <div class="tile" id="n5">05</div>
</div>
Jessica
  • 9,379
  • 14
  • 65
  • 136
  • If you want to do something like this, I would suggest http://masonry.desandro.com/ which is a javascript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. – Alex Rindone Oct 21 '16 at 20:26
  • A misconception people have about `flexbox` is that it is a two dimensional layout. You can have column **or** row direction within a `flex-container`, not both at the same time. There is no possible way you can do this without having 2 or more `flex-containers` or setting a fixed `height`. – Ricky Ruiz Oct 21 '16 at 20:41
  • 1
    @Ricky_Ruiz [it is possible to do this](http://stackoverflow.com/a/35097136/1529630) with forced line breaks. It's just that for some reason only Firefox cared to implement them – Oriol Oct 21 '16 at 20:44
  • @Oriol I didn't know about this. Quite interesting, thanks for sharing it. – Ricky Ruiz Oct 21 '16 at 22:53

2 Answers2

0

You can achieve this with flex-direction: column along with flex-wrap: wrap, but you won't be able to preserve the order of the elements.

A JavaScript library like Masonry might be worth looking into.

darrylyeo
  • 3,103
  • 20
  • 30
0

Like Darryl says, you want to do this with flex-flow: column wrap; and a fixed height on the parent element. This page on CSS-Tricks is invaluable to understanding the syntax, but basically changing the flex-direction flips it sideways. You can specify the order of children by setting the order: XX on the child tiles.

Tyler Shuster
  • 437
  • 1
  • 5
  • 12
  • If I do `flex-direction: column`, I will have to specify a height (for it to have multiple columns), which can't... – Jessica Oct 21 '16 at 20:40
  • You can't specify an explicit height for the parent container? You might be able to fudge it with a `min-height` or `max-height`, especially with the `vh` unit, which bases off your viewport height. If not possible, then yeah, Masonry's your best bet. – Tyler Shuster Oct 21 '16 at 22:20