Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive 1-2-3 column flexbox layout?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #241594
    horstenj
    Participant

    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

    #241595
    Paulie_D
    Member

    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.

    #241603
    horstenj
    Participant

    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.

    #241607
    Paulie_D
    Member

    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!

    #241608
    Paulie_D
    Member

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

    #241637
    I.m.learning
    Participant

    What’s the difference between Flexbox and @media?

    #241638
    Beverleyh
    Participant

    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

    #241647
    Atelierbram
    Participant

    @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”.

    #241649
    Paulie_D
    Member

    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.

    #241650
    Atelierbram
    Participant

    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.

    #241656
    I.m.learning
    Participant

    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.

    #241659
    Atelierbram
    Participant

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

    #241662
    I.m.learning
    Participant

    @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.

    #241663
    Atelierbram
    Participant

    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.

    #241664
    Paulie_D
    Member

    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/

Viewing 15 posts - 1 through 15 (of 20 total)
  • The forum ‘CSS’ is closed to new topics and replies.