Mystery spacing between 2 flex rows
Minimal reproducible code: https://codepen.io/ifigoinimightdie/pen/xxNeYxg
I have a simple flexbox with
flex-wrap: wrap. My 1st flex child has width: 100%, so the 2nd flex child goes to a new row. Yet there's a TON of extra spacing between them that has nothing to do with padding and margin. I never set a row-gap either.
Inspector indicates a purple region, which I think means the "shrink/grow" area. I tried setting flex: 1 etc. nothing has worked. Full codepen here:
Any help appreciated!
45 Replies
Larger image here:
Try just adding, positon: relative; on a container and position:absolute; on a div then there will be no spacing and u can place it wherever u want
Also u can try just specifing the height of a div
deppending of what u want to do
If it’s gonna be a video, you can use aspect -ratio instead of height to ensure the videos aspect ratio is always correct.
And prob something to do with the fixed heights and flex default stretch behaviour. If you apply align-contents start the “comments “ div aligns to its bottom of the video
Thanks for helping! So I wanted to avoid position: relative / absolute. The real code is that I want the comments section to go beside the video for larger screens
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.
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?Here’s a sandbox that shows the difference with the alignment properties but you can also play with them in the dev tools anywhere you have display: grid or display flex.
Align content only works on flex when it has a flex-wrap enabled. Justify self does not work on flex children.
All of them work with grid. There’s even a shorthand of place-content and place-items and place-self when you want both axis to do the same thing (center, start , end)
Here’s a couple links that came up when I googled
https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items#:~:text=while%20align%2Ditems%20would%20centre,text%2Dalign%3A%20center%20rule.
https://betterprogramming.pub/flexbox-align-items-and-align-content-a60b6f8451e3#:~:text=The%20align%2Dcontent%20property%20determines%20how%20flex%20lines%20are%20aligned,and%20along%20the%20cross%2Daxis.
It’s so visual though you’re better off playing with it in the dev tools with a grid container. I learned flex first and there are so many properties that don’t apply to flex I think it’s better to understand how it works with grid with all of them then you can apply the appropriate ones to flex.
Also this is a great resource for grid as a whole
https://css-tricks.com/snippets/css/complete-guide-grid/
Chris House
CSS-Tricks
A Complete Guide To CSS Grid | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Stack Overflow
What's the difference between align-content and align-items?
What is the difference between align-items and align-content?
Sorry edited that message with “here’s a sandbox” as I forgot the link of course
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
I see the sandbox now :^)
Basically align-content moves all the children as one whole and keeps the default “stretch” behaviour where align-items is for the individual children within the container and breaks the stretch to make them their intrinsic size on the block-size (or cross-axis for flex).
Playing with it visually with the sandbox or dev tools is what I would recommend as reading about it still keeps the concept kind of abstract. But when you see how the content behaves with all the alignment properties one by one I find it personally easier to grasp.
Not sure if you’ve read this yet but is an MDN specifically on alignment with grid
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout
MDN Web Docs
Box alignment in grid layout - CSS: Cascading Style Sheets | MDN
CSS grid layout implements the specification Box Alignment Level 3 which is the same standard flexbox uses for aligning items in its flex container. This specification details how alignment should work in all the different layout methods. Layout methods will conform to the specification where possible and implement individual behavior based on t...
hmm I think I'm starting to get it more, going through all the links :^)
I do find it easier to grasp initially with grid since there are outliers with flex so if you can grasp the main concepts and then remember the anomalies like align content w flex only works when flex has flex wrap ; and that justify self and justify items aren’t valid for flex then you’ll be good!
that sounds like a GREAT idea, maybe I'm making things more difficult focusing on flex first instead of grid...OK!
general --> then special case
Yeah I learned flex first then grid and would do it the other way around if I could do it again. Learn how the properties work then you’ll be better prepared to see how they work with flex cross axis thing
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 ROWSThen, if you have a vague idea or understanding of the concepts and still get stuck in a project, go to your dev tools, and anywhere you have grid or flex declared there will be a little tag in the Dom next to those elements.
You may already know this since you posted this with the flex outline on, but in the styles next to where you have declared display grid or display flex there is a little icon with most of the alignment properties, and you can toggle those on and off to see which one is the behaviour you want!
Yeah that’s kind of it , the content as a whole versus individual items
With flex though it changes with the cross axis
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?
Correct that’s why grid is easier. Align is always block axis and Justify is always inline axis.
Didn't know about this inspector icon feature for flex grid
Just read through and I’m sorry if I came off bossy “learn this” and “do that”- I’m trying to multitask right now and dictating instead of typing 🤣 so just suggestions not instructions
nope not at all, you have no idea how much CSS has shortened my lifespan. I'm more overwhelmed with gratitude
🤣 it’s my favourite language so I love CSS. Backend programming and logic has shortened MY lifespan and taken too many brain cells
It’s really helpful esp when flex tries to trick and confuse you with the cross axis, you can even play with it with the code pen you have linked and see how the different alignment properties affect your elements. Having big colours or outlines on everything def helps you see the difference too
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.
hmm ill have to play with that one; on grid it doesnt cause items to their intrinsic block size; also realized i had broken the sandbox by changing 'auto-fit' to auto-fill' so it was just aligning them in terms of their tiny cell. also helps to have the dev tools visual grid on. sorry i linked you to a broken demo while you were trying to learn!
so this is Justify Content vs Justify-Items
and Align-Content vs Align-Items
So Items is to their individual cell vs Content is to the grid as a whole
all this time and i guess i didnt realize that behaviour in flex; that align-content sets it to max-content on that axis! thanks for pointing that out! made a flex sandbox too to confirm but that is another anomaly with flex; as you can see, grid's align-content still has it stretch; but flex's align-content turns off stretch ; guess that makes sense because how can you set
align-content: space-between and have no space to distribute ? and thats why you need flex-wrap: wrap on .oh the demo was broken?! ahahhahaha OK i better revisit it again, i might have gotten some wrong conclusions from it
yes so sorry about that
theres now one for grid and one for flex; the grid one was broken 🤦🏻♀️
that makes sense
oh I just read your screenshotted ones that's very clear :^)
and its very basic, i didnt include the other properties like space-between/space-around and space-evenly for justify-content
now weve concluded that behavior is for grid. flex will shrink the item to max-content on the cross axis with Align-Content while grid allows them to stretch on the block axis
hmm so i gave number 7 padding-block to give it height so i wasnt working with such uniform objects and now in flex, as a row we have Align-Content vs Align-Items (see how 8 stretches to match 7's height with Content but with Items, they are both at their max-block-size; no-stretching)
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
correct!
then when align-items is applied, everything shrinks to its max-content on that axis and in this example is aligned center to its row. 7 has a height so is at its max-content and 8 aligns itself centered within the space of the row which is as tall as its tallest child (7 in this case)
great work! youve grasped it much more quickly than i did! i remember making a figma file and trying to visually the boxes where they would be for each , in any case defined with different sized boxes etc. this was before the fancy dev tools 🤣 dont feel badly if you wake up tomorrow and forget; you always have the dev tools to help figure out each case as it works differently with different content as we've seen!
So in your case, when the video and the 'comments here' are on the same row, the 'comments' will likely stretch to the same height as the video.
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
FYI we can now use the align-contents on block-level elements for the block/y axis, sans display: grid or display: flex! then center on the inline/x axis with margin-inline: auto;
sorry if ive overcomplicated it, i tend to do that. those sandboxes will be there for awhile but you can always fork them and/or use the dev tools and with time and repetition it will sink in. flex with its anomalies makes it more confusing. thats why starting with grid and no axis-flipping i find easier.
this is the most modern CSS I've seen in my entire life ahahahahahah wow
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
ill take that as a compliment but its all thanks to KPow that i know any of it!
knowing the fundamentals is definately key. so much of CSS is "it depends" ; everything you write depends on what youve done before it, and in what order with which selector etc. knowing the fundamentals of the box-model, stacking-contexts, the cascade, pseudo-elements etc is def important if you are or plan on writing a lot of css. i know you said css has shortened your lifespan so it doesnt sound like you particularly enjoy it; it helps if you enjoy it.
thats why i think kpow is so great; in so many of his videos i see a comment that says his enthusiasm and teaching style has made ppl fall in love with css that used to dread it. so i think his vids are a great starting point; esp a lot of the older ones where he covers fundamentals would be the way i would recommend you go to learn if you plan on doing so. wayyy better than just reading the mdn (which is important to but maybe after youre introduced to the concept) or the spec (i still cant follow a spec more than a few lines at a time; its too browser-engineer smart for me )
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!
you too, happy to help!!