Make flex rows act as columns to preserve time-line

Question

First of all: thank you for your time!
I'm looking to make a blog with Flex boxing. I've been looking at several places (here, here, here, here, here and here) but I can't get the "blog" effect I want. I'm looking to make a two column layout that could be made with flex-direction: column;.
Unfortunately this would result in a column of the most recent posts with a column of much older posts on its side. If I wan't to keep the time-line of the blog relevant I feel like I'll need to use flex-direction: row; in combination with flex-wrap: wrap;.
This option works well with same-height posts but results in lost space when the heights varies.

On the left-side is my current result, on the right-side the desired one:

I realize that this is clearly a grid that requires two columns rather than rows. But is there a way to make the align-items and align-content properties achieve this kind of layout on a row-based Flex box (and this without Javascript)? Or, if it is impossible like this would suggest,is there a work-around to use columns but keep the time-line relevant? Should I use something else than Flex?

This is my current situation made as simple as possible:

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.container div{
  border: 1px solid black;
  width: 40%;
}

<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
    <br/>
    <br/>
    <br/>
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
</div>

Thank you,
Maxime

No, that will not work, you'll need script or use float, or CSS grid ... and there is Masonry as well — Asons, Feb 15 '17 at 09:14

Tanasos · Accepted Answer · 2017-02-15T09:25:56.090

What you are aiming for is called a Masonry effect.

It can be done using CSS3 columns , Flex-box , or by applying a custom plugin.

There is however some issues using CSS columns, since they are a relatively new spec and they might cause some unwanted behavior for your visitors.

You can see what I am referring to at the Can I use chart for CSS3 columns.

My advice is to head for the Flexbox variant, which will be the less-problematic approach using the right prefixes.

Look up the codepen I've posted about.

Simply change the width of the columns and use it out-of-the-box

div#masonry img {  // and the img here will be your post
  width: 33.3%; // to > 49.5% or whatever suits your needs
  transition: .8s opacity;
}

Or you can dig in the website of the most used JS Masonry plugin, and all you need to do is wrap your head around the works of it.

Make flex rows act as columns to preserve time-line

1 Answers1