2

So I have a 3 column layout, with content that does not work well with partial wrapping. That is to say:

+----------+----------+----------+
|   THIS   |    IS    |   FINE   |
+----------+----------+----------+

+----------+
|    SO    |
+----------+
|    IS    |
+----------+
|   THIS   |
+----------+

+----------------+---------------+
|      THIS      |       IS      |
+----------------+---------------+
|               NOT              |
+--------------------------------+

+----------------+---------------+
|      NOR       |       IS      |
+----------------+---------------+
|      THIS      |
+----------------+

I'm obviously trying to make it responsive... my issue is trying to persuade it to jump DIRECTLY from the 3 col to the 1 WITHOUT "passing through" 2. Now, I know how to do accomplish this with both nesting columns 1 & 2 into their own flexed container, as well as how to do so with @media breaks... but I'm HOPING someone knows of a secret sauce syntax shorthand, such that even when using a simple, flat structure like

<div id="block1">1</div>
<div id="block2">2</div>
<div id="block3">3</div>

I can achieve

1 2 3

directly to

1
2
3

without the need for the nesting/media break hijinks. To be clear: there's nothing wrong with either, and that's how I'll make it work if need be. But... it just FEELS LIKE there should be a way to handle this directly. Some combination of grow/shrink/basis... SOMETHING. If I'm just wishing on a star here, then hey, thanks for reading anyway, and I'm sorry to wasted your time.

NerdyDeeds
  • 343
  • 1
  • 11
  • 2
    Does the flex items have width assigned? it could be as simple as setting each column to width 100% using media query. To me, your columns are either 33.33333% width or 100% width – Huangism Aug 09 '22 at 18:02
  • Basically, without media queries? NO – Paulie_D Aug 09 '22 at 18:04
  • @Huangism No, no, I get that. The whole point is can I do so WITHOUT the media query? I've been doing so just as you described, but I'm wondering if there's a way to convince FLEXBOX ALONE to handle it, no nested tags, no media breaks – NerdyDeeds Aug 09 '22 at 18:07
  • @Paulie_D dang. You sound pretty confident/definitive in that response. – NerdyDeeds Aug 09 '22 at 18:08
  • Yep....not possible with CSS. – Paulie_D Aug 09 '22 at 18:09
  • Do you see what I mean, though? I feel like the shape of it is there, given the right conditions. like, min-/max-width used in conjunction with flex-basis and flex-grow. I don't know WHY this nags at me so, but I think about it every time I need to do this. ...I'd kill for a :nth-in-row(n) pseudo, lol – NerdyDeeds Aug 09 '22 at 18:10
  • Without media queries how would the boxes know when to wrap? flex-grow make each item takes on an entire row, if you set max width then that will never change. Can't do it without media query. – Huangism Aug 09 '22 at 18:13
  • flex-basis dictates how much of the row a given block occupies. Now, I know that's superseded by min-width/max-width, but, if one were using relative units, and one could set out the conditions for the wrap such that the parent's narrowing triggered one conflict before the other... dunno. Like I said: maybe it's wishful thinking. But it nags at me every time. Like if I used % for the basis and a calc'd vw for the min-width.... – NerdyDeeds Aug 09 '22 at 18:16
  • I'm absolutely prepared to concede that it'd probably be a "yes, but only for given boundary conditions and if using a box-sizing of XXX with a relatively-positioned parent or something" but it just BUGS me... I feel like I can ALMOST work out how to get there but hit a snag every time. Or, maybe I'm gazing off a porch atop Mount Stupid and the sensation will pass when I'm finally Dunn – NerdyDeeds Aug 09 '22 at 18:26
  • Honestly, defining a couple of rules in a media query is the best way to go, easy to understand, easy to update for most devs. If you end up defining a bunch of rules and somehow making this work. When someone else comes in and looks at it, they will be confused, and you will probably end up defining more rules than needed. Simplicity is always best – Huangism Aug 09 '22 at 18:55
  • @Huangism: I dunno... @ include clamp-wrap (600px,3); doesn't come off as that hard to me. – NerdyDeeds Aug 09 '22 at 19:00
  • As an exercise, sure do whatever you want but not practical when you have a team of devs – Huangism Aug 09 '22 at 19:02
  • I'll leave it at this: I understand and respect what you're saying. I further agree that readability trumps cleverness, and that this IS a less-standarized means of doing so. HOWEVER, I DO run a team of devs. I ALSO have seen us run into conflicting media queries. Finally, if the team is all working on the same site, and we have a standardized set of mixins we employ, I can make the counterargument that having a singular point of control for the behavior that's employed as a standard could be MORE useful, even if not everyone knew off the top of their heads how to do so at time of hiring. – NerdyDeeds Aug 09 '22 at 19:06
  • @Paulie_D it's possible – Temani Afif Aug 09 '22 at 20:02

1 Answers1

0

Never mind! Chris Coyer over at css-tricks apparently not only had the same notion, but sat down and worked out the math to do so!

The critical path here appears to be clamp (duh! I totally forgot clamp)!

clamp(100%/(N + 1) + 0.1%, (400px - 100vw)*1000, 100%)

See, when the screen width (100vw) is greater than 400px, (400px - 100vw) results in a negative value, and it gets clamped down to 100%/(N + 1) + 0.1%, which is a positive value. This gives us N items per row.

When the screen width (100vw) is less than 400px, (400px - 100vw) is a positive value and multiplied by a big value that’s clamped to the 100%. This results in one full-width element per row.

Working demo: https://codepen.io/NerdyDeeds/pen/OJvwREp

NerdyDeeds
  • 343
  • 1
  • 11
  • Despite the grid comment, this is also difficult to read/maintain, you are better off just using the traditional method. You would ideally want something that when someone else reads it, they will immediately understand what's going on. – Huangism Aug 09 '22 at 18:51
  • Again, guys: this was an academic exercise. Is it POSSIBLE to achieve the effect without the media query? @AStombaugh Yes, I noticed that myself, although the wrapping behavior of the grid CAN be emulated in flexbox. That I DID know how to do already. Gimme a few and I'll assemble another demo. Also, I heartily encourage you to READ the article (I'm in no way affiliated, it's just really GOOD). He also goes into having MULTIPLE LAYERS of breaks (9 to 6 to 3 to 1), ALSO without a media query. Finally, if you're using SASS or SCSS, this can mixin'd REALLY easily! – NerdyDeeds Aug 09 '22 at 18:55
  • 1
    it's not Chris who wrote that article but me ;) – Temani Afif Aug 09 '22 at 20:00
  • 1
    @AStombaugh the article also cover flexbox as well and the same trick applies – Temani Afif Aug 09 '22 at 20:05
  • @TemaniAfif I totally missed the byline! I stand most humbly corrected! Credit where credit's due: that was a simply genius solution. I implemented the pieces I was intending to for my current client (whom I cannot name specifically, but whose initials are I, B, and M) and the solution is already being rolled out to good effect. Thanks again! – NerdyDeeds Sep 21 '22 at 08:59