Increase item's height with flexbox [duplicate]

Question

Is there a way to create a layout without blank spaces where most items are the same dimensions, but some are 2x the height? I can make something similar to what I want with the following CSS:

Parent:

display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;

Children:

width: 22%
height: 100px;

The tall one has height: 200px. It looks like this:

It's pretty close, but the problem is that I need a left-to-right order, not top-to-bottom, so I can't use flex-direction: column. If I do the same with flex-direction: row, it doesn't work:

Any ideas?

Answer 1

Depending on your overall scenario, you may be able to use the order property.

The CSS order property specifies the order used to lay out flex items in their flex container.

Here's a basic flexbox with 20 flex items in column alignment.

Numbering is vertical, like in your first image.

• Demo 1: http://jsfiddle.net/y12kh47f/

---

With order you can rearrange the layout without changing the HTML or flex-direction.

Items are stacked in columns, but the order property overrides their natural positioning and rearranges them into rows, like in your second image.

• Demo 2: http://jsfiddle.net/y12kh47f/1/

---

Then, if you double the size of a few items, you just need to figure out the math for proper ordering (since each item will now occupy two spaces).

Note there is no extra vertical spacing between items.

• Demo 3: http://jsfiddle.net/y12kh47f/3/

All flex items are set to order: 0 by default. Negative values are permitted (i.e. order: -3).