Responsive 1-2-3 column flexbox layout?

[horstenj]

I’m trying to realize a CSS flexbox variation of the responsive example in the (extremely helpful!) article ‘A Complete Guide to Flexbox’ on this site. This is what I’d like to achieve:

Of course the challenge is the medium size screen. Note that aside 2 has to come directly below aside 1, both left of main. I cannot figure it out, neither the colleagues I consulted. Does anyone know how to do this?

Thnx!

Joost

[Paulie_D]

Pretty much until display:contents comes along I doubt if this is possible with flexbox. At least without some funky hacking about.

I mean that you can do it but it’s pretty horrible and you do need to know some numbers.

Also I think it’s buggy in Chrome and probably others too.

[horstenj]

Thanks Paulie,

The good news for me is at least that I’ve not overlooked something simple ;-). If it is not possible by pure CSS, I need to think of trick of some kind. I may have found one: http://codepen.io/horstenj/pen/LNvdKK

I’ll admit it’s a bit of a dirty trick as it also requires some HTML. But it works. In essence, I define the ‘aside 2’ twice and depending on the screen width, I hide one or the other.

[Paulie_D]

As I said, it’s not impossible

http://codepen.io/Paulie-D/pen/dMLeRG

But you need to know the height of the container ( at least in Chrome AFAIK) and as for IE...fuhgeddabowdit!

[Paulie_D]

Frankly, I’d be more inclined to do some minor re-ordering / wrapping with JS than defining elements twice (shudders)

[I.m.learning]

What’s the difference between Flexbox and @media?

[Beverleyh]

What’s the difference between Flexbox and @media?

Google is your friend. Try searching for each in turn and read about them. You will find examples and use cases for each.

The short answer;

Flexbox = CSS layouts
@media = CSS filters

[Atelierbram]

@horstenj I know you want to make this work with flexbox, but to me this layout seems like a natural use-case for CSS grid layout.

my fork of your demo

Will only work in the newest browsers; in opera, chrome, or chrome canary you will have to enable “experimental web platform features”.

[Paulie_D]

I know you want to make this work with flexbox, but to me this layout seems like a natural use-case for CSS grid layout.

Support for CSS Grids is abysmal right now whereas flexbox (although not without it’s issues) has much wider acceptance and support.

As I mentioned, once display:contents comes along (which is likely to be before Grids IMO) this is a snap.

[Atelierbram]

Didn’t knew or forgot about display: contents, so thanks @paulie_d for I learned something. It’s well explained over here and that seems to be what would work in the demo.

For what it is worth, my point would be that when browser support for CSS grid layout is there, that would the best solution for this layout. Could even do this today with progressive enhancement: @supports (display:grid) { } and flexbox as a default and/or fallback.

[I.m.learning]

Google is your friend.

No, it isn’t! I’m so tired of asking my “friend” for help, and in return, get sent to places I really don’t want to visit because the answers are not straightforward.

Now, if my friend would stop giving me useless answers, I wouldn’t have to ask this here.

This place (for the most part) gives straight up answers. And when I am confused, I ask them here. I mostly only use a few places for my questions: Stack Overflow, W3schools, CSS-tricks.

[Atelierbram]

@lip_lostinprogramming and what about books and articles on webdesign, do you read them?

[I.m.learning]

@Atelierbram
Not when I’m looking for specific issues. But sometimes I read some of the articles Chris posts. What it really comes to is: I chose the wrong colleges for my education.

[Atelierbram]

Just a few thoughts that come to mind, just take it for what it is worth (because I don’t really know you and the situation you’re in).

A lot of people are self-taught on web-design, and there is nothing wrong with that. From my own experience I remember the time I was becoming more and more dissatisfied with “trial and error” on each and every specific issue. Reading books on webdesign and doing all these small projects (this back and forth is important) did help having a better understanding, and simply become more knowledgeable on the subject. But the learning never stops, and one also can learn how to ask better informed questions, so you will get better answers, even from search-engines.

[Paulie_D]

Some of us had to be self-taught because the web didn’t exist at the time.

:)

We learned as we went….and went from there.

What’s the best way to learn…?

http://justbuildwebsites.com/

[Author]

Posts