Using flex for `.flow-content` utility
Why use a margin-top/bottom rather than something like
140 Replies
why not just use grid/gap ๐
Yeah, just the same...
its not
the gap is the space between elements inside the flex/grid
I'm saying it's the same in regards to the question, as in... why not... I'm not saying flex and grid are the same ๐คฆ๐ปโโ๏ธ
Just depends what you need.
why use margin-top and bottom? because it's not the same as the gap
you can't directly compare both because they do different things, even if they look like they do the same
You might not want your children to be flex/grid
block elements behave different
The result is pretty much the same in an easier to interpret rule than:
Which is recommended
For me this question boils down to how I want children to behave.
Grid and Block are going to keep width: 100% by default
that's not the same as
gapIf for some reason I don't want grid children but block I'm going to use margin-bottom
I'm just talking about it in the context of a recommended utility - not a specific case
what recommended utility?
Oh Kevins flow
again cause you are not changing the children
The visual result is mostly the same bar exceptions
no, it isn't
nowhere close
Flex def changes the children xD
Lol I achieved the same result by doing the above rule so sure
You think that but its not ๐
margin-top sets a margin at the top, while gap separates the elements vertically AND horizontallyCan you see flex?
open dev tools
I said visual result
it's not the same
margins can compound
collapse*
and gap does VERTICAL AND HORIZONTAL
it won't be the same as margin top and bottom
It's set to direction "column" in my helper
which changes things again
also, margins have to be manually set to do not apply to the first and last elements, depends on what you do
again making children flex children, and changing the axis is not always what you want.
which, again, gap does automatically
The helper above excludes the first element as it's using
* + *
The recommended oneAgain for me it all comes down to what type of child/parent relationship I need.
but doesn't exclude the last element
The helper also assumes something with not inline formatting - to be flow content
Yeah, that's the point
gap doesn't care about the display
but margin does
Right
well gap does care...
Ain't gonna do much to inline elements
not really, it doesn't
neighter does margin-block
no, really it does
will do nothing to inline elements
Yeah
I never said margin doesn't care ๐คท๐ปโโ๏ธ
gap doesn't care
any way the flow utility is for block children, if you want flexy children use flex, if you want grid use grid.
Oh wait lol, you're saying it doesn't care about CHILDREN, please complete your sentences
flex column is ๐คข imo unless you are changing it from row for like mobile
90% of the time you just want block elements or grid
today i learned something: inline elements don't apply the margin unless when they are children of flex or grid
that is because they are no longer inline
they aren't inline
but flex/grid children
^
i do have a question i will test now
Why do you not like flex column?
Because its counter productive
Why?
You are using Flex but changing is axis
children a max-content by default not filling the parent
it's like putting every block in the square hole
Like if you are just wanting vertical content (with control over children, or gap)
use Grid
there's a better hole for the circle, so, why are you forcing it into the square hole?
it fits, you can use flex for columns, but you're fighting against flex's ways
assuming you want columns with the exact same width
if you want it to flex, it may have some uses, like a sidebar or something
Most the time you want things to fill too
idk why people always lean to flex then have to fuk with magic numbers
%'s and shit
oh god, that's a pain in flex
with grid, it's automatic
Not to mention when you want sizing based on siblings
and have any expectations of anything being aligned too
people I think just have no clue how flex even works ๐คฃ
cause changing the axis can be powerful but it changes the behavior of flex-basis/shrink/stretch (which maybe what you want) and justify/align.
Which imo is stupid if you are just wanting vertical content... now you have alignment for justify etc etc.
When 90% of the time you should just be using Block or Grid ๐
The context I had was vertical stack with center aligned blocks of different height. I found a
flex column with align-items: center a way more convenient helper than grid for thissomething like masonry?
I haven't explored masonry yet
Just see it in news feeds
I would have to see the example, cause Grid is 10x more powerful for centering content/items
Here is an example from other day https://codepen.io/b1mind/pen/VwOMegZ?editors=0100
place-content: center <- helpsexactly
I get triggered when I read align-items and its centering horizontally personally ๐คฃ
Actually
place-content: center hasn't solved itnobody does that, right???? ๐
again you would have to show us an example, I can't assume what you are doing nore the html.
yeah, it's better if you show us some code
at this point, we're nearly literally grasping at straws, trying to guestimate what might be
Whats worse is when I see a <ul> with flex direction on it
oh lord
TW users love using <ul>'s with flex/direction col
that's a quick way to get rid of the list marks, but it looks so weird and the code is so dumb
I'm just refactoring a working and easy utility from flex to your grid solution - i shouldn't need help or it kinda ruins your point
My only point is knowing the child parent relationship and how children behave differently between the three
only solution I've found so far with this grid is to
justify-self: center on the inline-block child of this "now" grid๐ค
the codepen you shared also doesn't handle inline-block elements - but I guess it's weird to put them as children of a grid - they should be grid children... just might be helpful for sizing to rely on an anonymous box
and the flex solution can handle them
Still not sure of your use case so no clue
vertical stack with center aligned blocks of different height, one of them inline-block
some equal spacing between each of them
but moreso... a convenient utilty for "flow-content" that with the least drawbacks and easy to comprehend for junior devs
I came here assuming that the margin solution was the most battle tested and wanted to understand the pitfalls of alternatives (given it's recommended)
Again just depends on do you want those children to shrink to max-content by default
reasonable answer
Block/grid content will fill to the 100% of its parent by default, flex by default does a max-content on each child.
Difference with block and grid would be grid children will fill to the largest grid track, block would be independent of siblings
makes sense - any team could adapt to either default - sounds a bit subjective
cool
Grid will also max-content children with things like justify-self/align-self. or if defined direction in the template.
So yea its one big ol #depends what you need on this one ๐
if most your child content is block elements use margin-top/bottom
I tend to use it all honestly...
i just use what feels right
except floats! floats suck
coding with vibes is ๐ฅ
again, trying to focus on the generalised utility here rather than specifics
the problem is that ... there's no generalized advice, in the end
it's just about what you want to happen and the tools you have available
so like flow content > * + * is really handy when you have article content
Specially if you are using a funky reset that removes margins from headings and <p>s
Gap is really handy when you need spacing in your layout
and you use grid/flex
it's amazing to keep everything aligned and separated
a problem with old tech was to keep everything separated
I think the point here for a generalised advice would be that using an margin only solution without changing the display will interfere less with existing flow and align more closely with what's been practiced more in the past
of course, doesn't stop people from utilising the grid/flex solutions in context
yea I'd agree with that
In the end you know what really does it for Utility classes is just having it documented in the design system >.>;;
clear example and use cases
also, less declarations
Also you can now do some pretty powerful selectors so you could do a check to see if it has a grid/flex util class on it and change it from margin to gap ๐ง
.flow:has(.grid) {} ? or what not
.flow:not(.flex) {}
having written extensive documentation for a company wide design system and monitoring usage of those docs.. i can tell you that people only read examples and play around with the interactive controls or use the getting started guide ๐ barely anyone reads the detailed nuanced bits - they're all too busy delivering features
is bad at the new selectors needs to practice himself
yea I could see that, its good you have both though. Interactive is teh way imo.
yeah, works if you have utilities for grid and flex.. clever.. but not if you don't
right but same could be used for any ๐
aye
thanks, got good answers eventually... after y'all being grid snobs about flex-column
lol I'm a grid snob period
I think people overuse flex when grid is what they need.
it's existed for longer
its my new "don't use vh/vw" rant
flex gap is only supported to 2020 where grids is 2017 so ...
wait, surely that' an IE/edge stat
I had cases where I was having to support outdated users and had to use margin-left (for flex navigations)
safari/chrome
Both are locked behind OS updates too
so its not just a browser update
i guess i'm talking about the display property rather than the gap
as that's the gateway to these things
Never had a user not support grid
had them not support flex gap though
๐
okay, well i have
IE 11 supports grid even
hell IE birthd grid xD
ms-grid was first I think
grid is OOOOOOOOLD
Again I fight people with grid reluctance its 2024 ffs
Stupid to not be using it all over imo
like making websites with a hand tied behind your back
I had to preach grid to a team of seniors who built a design system for just one rule 2 years ago
i was their tech lead so i had weight in the conversation too
but people are just more comfortable with flex, it has been around for longer
lots of people learned from someone who was writing CSS long before 2017
but grid exists before 2017, no?
full support in 2017
it existed in IE before
I definitely remember many years of waiting for full grid support and fighting some weird flex quirks using
min-width: 0 (or was it 1px?) and shitsounds like that was an ie hack
it was on chrome
its for inputs to shrink
a hack they wanted to make default in TW ๐คข (recently)
i get why they want it
* { min-width: 0;} was purposed
preposed?
w/eproposed
Kevin Powell
YouTube
Is this a good idea?
After Adam Wathan, and then @t3dotgg both posted and talked about the min-width: 0 thing, I've been getting a lot of questions about what I think about it. Rather than just share my own opinion on it (which we will get into), I saw it as a fun opportunity to dive into how Flexbox works and why this can sometimes solve some strange issues, but al...
damn I failed 2x
and english is my 2nd language ๐คฃ
i can see why tailwind wanted to make that the default
we have derailed this train
the bundle size probably drops 1mb from removing all the "classes" needed for that hack
oh, yeah, completely
in short: grid good, flex good, use where makes sense
block good too xD (with flow util*)
floats bad, except for images
@tomatao I realize this conversation carried on to other topics, but my skim through didn't seem to address the most important reason
margin and gap aren't the same, which is that gap will always be equal, while margin, if set in em will depend on the font-size of the element, which is a good thing in a lot of situations.
If I missed where this came up, I apologize ๐
I made a video on this actually ๐
https://youtu.be/Gx0iZrN-0L4
Kevin Powell
YouTube
CSS gap is NOT a replacement for margins
Iโve seen some people completely abandoning margins and turning to using gap for everything, and to me, thatโs problematic. Donโt get me wrong, gap is an absolute lifesaver, especially when it comes to spacing out components. What itโs not best for, however, is spacing out regular flow content like text.
So, this isnโt to say that you should n...
Oh really ? I'd expect the scaling to only depends on the units used. So gap doesn't scale? Mad
Well,
1.2em would scale, but it's from the parent element where the grid is defined, not the children. With the .flow > * + *, we're directly targetting each child, so it scales independently for each one.
Now, sometimes you want even spacing. It's common in, say, a card or form. Then, grid with gap all the way.