3

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:

Screnshot 1

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:

Screenshot 2

Any ideas?

Victor Marchuk
  • 13,045
  • 12
  • 43
  • 67
  • 1
    If most items are the same dimension and only a few are 2x the height, keep your `column` layout and use the `order` property to rearrange them. If this is feasible in your scenario, let me know and I'll prepare an answer with more details. – Michael Benjamin Oct 15 '15 at 14:54
  • Michael_B, please do, it sounds like the best solution in my case. – Victor Marchuk Oct 15 '15 at 15:24
  • 1
    `order` would be pretty gnarly with the indicated number of divs (30+)...plus it wouldn't be responsive....you'd probably need JS to keep track...and if you're using JS, you might as well use Masonry.js. :) – Paulie_D Oct 15 '15 at 15:28

1 Answers1

3

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.

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.

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.

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Thanks! It seems that the math would be pretty complicated and on resize I would still need to recalculate the order, so there is no real advantages over masonry. – Victor Marchuk Oct 18 '15 at 11:07
  • I just came across this response and it looks like it's going to help me accomplish exactly what I need. Thank you! – butterednapkins Nov 07 '16 at 23:27