Responsive 1-2-3 column flexbox layout?

[I.m.learning]

@Paulie_D:
I had to laugh

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

Mom told me she still remembers punch cards. How many people would even know what that means?

[Paulie_D]

Punchcards…yep.

Punch tape and having to punch it by hand because they hadn’t gotten around to linking the punching machine to the terminal.

[horstenj]

Guys, don’t make me feel even older :-( ;-) I started my career with punch cards in the 70s….. My most recent experience web design experience has been with html 1.0 on the original ‘http deamon’ (now called a ‘webserver’) from Tim Berners Lee himself. So, in the last month I got a bit of catching up to do ;-)

But back on topic: Thanks for the comment re display:content and grid. Grid sounds very promising and simple but not available yet. I can’t figure out yet how should apply display:content for my case (if it would be available)

[Paulie_D]

display:contents is very new, only supported by FF and even that’s behind a experimental flag.

Definitely not production ready.

[Paulie_D]

How it works is you wrap elements as you normally would but by setting display:contents on that wrapper (as and when required) it’s as though the wrapper did not exist.

So for your required “medium” layout we could wrap the two asides into a single div but have that wrapper not be effective for various viewport widths.

You central section really needs to be this HTML (excluding the header and footer) given the current state of flexbox

<main>
  <div class="asidewrap">
    <aside></aside>
    <aside></aside>
  </div>
  <div class="content"></div>
</main>

Now obviously this won’t work for the other layout so with those we can/could apply display:contents to the .asidewrap div and it would be as though the HTML would be

<main>
    <aside></aside>
    <aside></aside>
  <div class="content"></div>
</main>

Then we just order the divs as we want.

Alas…we’re not there yet.

[Author]

Posts