Two column flexbox similar to display: inline-block; width: 50%

Hello there. Is this is possible to do with flexbox? I’m working on an existing code base which uses flexbox and would like to alter the css as little as possible.

I want to dynamically generate news articles in a two-column layout. I know how to do this with inline-block, but I am pretty much a noob when it comes to flexbox. I also need to have a border between each element and a border at the bottom of each of the elements (except the one or two at the bottom – like I’ve done in the plunker below).

Can this be done with flexbox?

Thanks :smile:

Plunker: http://plnkr.co/edit/hW2wohtWzV3YsTvmUVH7?p=preview

It’s not difficult to replicate this design with flexbox:

.outer {
  display: flex;
  flex-flow: wrap;
  …  
}

.inner {
  flex: 0 0 50%;
  …
}

.border {
  box-sizing: border-box;
  height: 100%;
  padding: 2%;
}

You need to use vendor prefixes, and here is a service that does that.

Ah! Thanks a lot! :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.