ATTACK0314
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
I learnt A LOT from KPow, but I'm really happy I now know of other complementary resources i.e. the ones you sent me. It's like unlocking a whole new map. I will definitely review the older videos, grasp the fundamentals, it will save me a lot of time on the long run, and I much enjoy CSS when I get a deeper understanding. Still can't believe you helped me with an elegant solution that works with one-line: align-content: start. I just integrated it into the real website https://explanations.app - where I can click the "full view" on any video, the for small screens the comments goes to the bottom, for desktop the comment section is besides the video. It seems to work :^)
Thanks again for such thorough help, I could not have asked for better help than this. Hope you get some wonderful rest!
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
no I think it's great, you are giving me ways to go deeper, instead of oversimplifying it which is I think why I struggle with CSS so consistently - even when I solve the problem at hand, I don't have a deeper understanding of the fundamental abstractions I'm working wtih
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
this is the most modern CSS I've seen in my entire life ahahahahahah wow
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
Yes, and thanks for encouraging me, I still confused as hell, please help me in the future when I forget. BTW the dev tool was AMAZING, very simple but so useful, never noticed that indicator
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
my understanding of left example: you gave 7 a height, so it stretched the row to be taller. Align-items is not defined so it's initial=normal=stretch, so 8 stretches because of 7. Align-content is not responsible here for stretching the row, the row itself was stretched by its tallest child 7, then 8 stretches too
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
oh I just read your screenshotted ones that's very clear :^)
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
that makes sense
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
oh the demo was broken?! ahahhahaha OK i better revisit it again, i might have gotten some wrong conclusions from it
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
AH i THINK it makes sense to me now - the explanation for the confusing default behavior is that, align-content is by default "stretch" (even though it's called "normal", but it's like align-items: normal (which for flexbox is literally stretch). So the video takes up a fixed height, the comments row will stretch to fill the remaining container height, so be massive. Doing align-content: start is not only what I want, it also causes the rows to go back to their intrinsic size.
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
nope not at all, you have no idea how much CSS has shortened my lifespan. I'm more overwhelmed with gratitude
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
Didn't know about this inspector icon feature for flex grid
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
ah since align-items is always cross-axis, so it could be a row or a column, so the true rule is in relation to how the axes are defined?
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
is it inaccurate to say,
align-content is like align-items, except now the "items" are not the individual flex children, but the entire FLEX ROWS60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
general --> then special case
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
that sounds like a GREAT idea, maybe I'm making things more difficult focusing on flex first instead of grid...OK!
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
hmm I think I'm starting to get it more, going through all the links :^)
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
I see the sandbox now :^)
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
thank you very much! You saved me hours of struggle and I'm sure reading these will prevent a lot of future pain too! 😭 🔥 I will read these now
60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
It worked! I think the change didn't get reflected on codepen when I saved it first time, is there a way I could read in-depth what align-content is? I have worked with CSS with align-items, justify-content, gap, etc. recently came across flex, flex-shrink, flex-grow, but this is the first time introduced to
align-content. MDN's doc is quite dense
And what is the intuitive reason behind this default behavior for align-content: normal? Why does the comment end up in the middle of nowhere, is this behavior helpful in other situations?60 replies
KPCKevin Powell - Community
•Created by ATTACK0314 on 6/27/2024 in #front-end
Mystery spacing between 2 flex rows
Thanks for helping!
auto is great though I hard-coded a video height for the sake of the minimal example, I just tried align-content: start for container, then for the comments div, neither worked 😢
Conceptually, after reading MDN, I don't understand the difference between align-items and align-content still.60 replies