Combining CSS Columns+Flexbox?

[RyanReese]

Is it possible to have a CSS column layout with Flexbox? Has anyone done or seen any examples of this? I’m trying to make use of CSS columns but make use of flex ordering by combining the two layout modules…I’m assuming they don’t mix, no matter what flex settings I provide (e.g. flex wrap, flex direction columns, etc). Can anyone provide confirmation or link to the specs affirming such behavior?

[ralphm]

Presumably you can use columns within a display: flex element, although I suspect you’re after something more complex than that.

[RyanReese]

Unfortunately, yes, more complex . The ideal scenario is pure CSS Columns with the ability to manually order elements (that flexbox offers) since the source code is out of order by default. However flex is overriding the CSS columns almost entirely.

I ended up just using JS to manipulate it but I was hoping to avoid that. Any insights on this would be welcome.

I have elements xxxyyy, I needed to set up 3 columns of 2 elements that was:
x y x
y x y

(Reading that from CSS column perspective).

So…yeah.

[ralphm]

@RyanReese

The ideal scenario is pure CSS Columns with the ability to manually order elements

It’s not clear which elements, though. Do you mean columns? Or do you have multiple flex boxes with columns in them? Perhaps an image or demo would clarify.

[RyanReese]

http:// stp atric ks.fin als it e.co m/

Look at the social media mashup section (unfinished). Granted, I re-orered them with Javascript already, but the output by default is instagram*3, and then 3 facebook posts (two separate functions call them).

So without manipulation I’d have 3 instagram elements and 3 facebook in a row, which would results in the left column being instagram, the middle being 1 instagram + 1 facebook, and the right column being all facebook.

I need the ability to mix and match. This is pinterest-style.

var checkSocial=setInterval(function() {
      if($(".mashup-section article.insta-entry").length && $(".mashup-section article.facebook-post").length) {
        clearInterval(checkSocial);
        $(".mashup-section article").each(function(i) { //all articles should be in the mashup section now
          if(i % 2 === 0) {
            $(this).appendTo($(this).parent());
          }
        });
      }
    });

[ralphm]

Hm, quite mashed up for me in Chrome right now. Only 3 items showing, and a few bits scattered here and there.

[PaulOB]

I’m not sure is this is what you mean but you can create a flex box inside css columns and thus move the boxes around in columns.

Doesn’t seem to work in Firefox though

The moz developer network says this:

column-* properties of the multiple column module have no effect on a flex item.
float and clear have no effect on a flex item. Using float causes the display property of the element to compute to block.
vertical-align has no effect on the alignment of flex items.

[RyanReese]

Even from that screenshot you can see it’s 6 . Look at teh HTML or the icons.

Thanks for the attempt Paul.