Flexbox Alignment & Justification Without the Guesswork

[@relja_]

This video finally helped me remember when to use which property justify-content, align-content, align-items, and justify-items. I'm someone who struggles to remember concepts unless I truly understand them, and your explanation made me remember the differences immediately. The distinction between "content" referring to items as a unit and "items" referring to individual elements, along with the align-items: justify-between example (showing how there’s no space to distribute when there aren't other items on that axis), really sealed the deal for me. I always feel like when people explain things they always forget to include the crucial details that make things click faster (like in this example the diff between what word content refers to and what word items refers to). It would be great if you did the same video for grid 😊

[@KevinPowell]

So glad that you liked this one! I have a grid follow up planned for next month 😊

[@MrJloa]

I just try both all the time, takes like 2s with hot-reload anyway

[@ILoveWordPress]

Wow, I'm dealing with this on a daily basis. I somewhat learned to "guess" which property I needed, but it was basically a guess. Now these will be informed guesses :) Thank you Kevin, a brilliant video as always!

[@gingerlox7236]

Just wanted to let you know I've been trying to learn web dev for years, and I've never stuck to it as long as I have after watching your videos. You have an amazing way of making seemingly complicated things click. Thanks so much for all the content

[@sarahfox3652]

Same!!

[@dandandan01]

This is actually the best explanation I've seen of this. I usually just trial and error until I get what I need, but now I understand. I'll be passing this onto my team - thank you so much

[@lilyshevchenko7048]

Gobsmacked about the visual dev tool for alignments. Gamechanger.

[@st8113]

I love that these videos are completely evergreen, because I will simply never remember this

[@RobMeijerUk]

Every time I've had to do this, I either guess 'til I get it right, or use the browser tools like you demonstrated. This is the first time someone has explained the difference between "content" and "items" in a way I understand, and now it all suddenly makes sense. Thank you so much!

[@deltaexile1906]

Finally the flex-box making sense now

[@Obito2912-c4r]

Excellent video, especially at the end, thank you a lot man!

[@jayel27]

😂 this confused me even more. I might be tired. I’ll watch again to confirm 😂🤷🏽‍♂️👍🏽

[@DevonWoork]

Another great video 👍

[@bopuc]

Sticking point for me here at about 4:40... why do the 4 columns which have been 400px high all this time (the min-height on the parent) suddenly collapse when you apply align-items? This is so confusing to me because I don't expect that collapse to happen... I would think the content of the children would drop to the center axis but their divs remain stretched. Why are they stretched in the first place if what actually happens is the logical thing (which it is!)? 😅 This aside, this was super helpful. Knowing that "content" here means "the elements in this element" and not "The Content" (i.e.: the text/media) clarifies the mental model a lot! 🙏🏼

[@ikbo]

Thanks Kevin! Video suggestion: different ways to do bento layout in flex and grid

[@DavidBogas]

That as very concise and useful. Thank you Kevin.

[@yvng4697]

Thank you so much!!

[@ShootFirstNS]

this video perfectly illustrates why I hate CSS, thank you for this, especially the dev tool insight and the tip at the end but good lord do I hate CSS. I'm just learning it so I understand is when I'm manipulating the DOM in JS

[@harvey_04]

Thanks

[@JuanCastro-C]

Thank you Kevin for this and all the awesome content you create, I just enrolled in your Flexbox simplified course, do you have something similar but for Grid?

[@Edu-SanDevIstan]

Thanks for the tips!

[@DatVerse]

Hi, thanks for your video. How to have the "Visuals" mode toggle like your video? what tool do you use? Thanks ❤

[@NotKyleChicago]

That tool at 1:20 is one I've used many times since I don't remember all the nuances.

[@Xoltron_5X-l3w]

Hey Kevin! is it possible if you could cover alignment for grid at some point?

[@orterves]

What is daunting to me about css is how much the engine is doing with so little, yet in a way that you need to know all the little things in detail as CSS in a project compounds upon itself and with the html It's comparable to SQL, where a simple select statement can be doing a whole lot under the hood with the query planner - but the SQL mental model is I think an order or magnitude less detailed than the CSS one, and way more self-contained. This may just be my inexperience with CSS, and a poor mental model on my part though. At least these videos are excellent in demonstrating the use as well as explaining a little of what's going on underneath the hood

[@itsPenguinBoy]

I go through every single variation of justify/align-content/items/objects until I get there every. single. time. Then I google CSS tricks flexbox AGAIN. I feel like that's me 10 years in now, and it'll be me at retirement.

[@Dorchwoods]

Lol same here

What I learned today: CSS actually makes a lot of sense, saying otherwise is a skill issue.

[@SuatBarlak]

Nice video but i have to ask about that shirt.. where can i get that shirt? 😅

[@mr7clay]

Why does min-height stop applying when an alignment is set? But clearly, the min-height is still affecting the cross-axis height, so it's having *some* effect, but not on the element's height. Fun.

[@TheNewton]

What trips me up thinking I can easily center 1 part within the ENTIRE area of the flexbox that's full page width. Such as a header with logo ,heading text , action icons etc. If you simply center the second box the header text isn't actually centered relative to the page but it's box. So I end up doing shared grid template areas but the heading-text better be short of the overlap shows.

[@TheNewton]

Example: Website | header { display: flex; align-items:center; } h1 { text-align: center; margin: 0 auto;} .page-center-marker { width: 100%; text-align: center; }

[@TheNewton]

Example: shared grid template areas, overlapping content to center text

[@psm6618]

Please explain step-by-step how to turn on dev tools in VS Code?

[@ikbo]

Do you have a similar paid course for grid layout?

[@KevinPowell]

I don't, but I will eventually be recreating this course as a CSS Layouts one where I cover both in depth

[@ikbo]

@@KevinPowell that is exactly the course I am interested in!!

[@graysonpeddie]

Am I the only one who forgets the 2CSS properties? Justify-content and align-items? Had to look up the properties.

[@Action2me]

Those are the two I use the most. Align-items: center; is really useful for getting an icon and text centered inside a button for example.

[@Action2me]

And adding a space between the icon and text is as easy as declaring “gap: 1rem;”

[@graysonpeddie]

@@Action2me Click in the 3 dots and click in Edit. You can then edit your comment.

[@conorjmoran]

why does *align-items: center* change the height of the items? (kzbin.info/www/bejne/q3rdkohvbaaeZ80)

[@sardarzain1066]

Developers have two people to fall in love with one is their woman as usual and second is kevin powell

[@taylorfullstack]

Or their man and Kevin Powell

[@sardarzain1066]

@@taylorfullstack yes Taylor yes

[@MrJloa]

Anyone knows why flex-direction values are inverted 😮 column -- gives rows; rows -- gives column. U know the name of the actual author of the implementation? Wanna send him an email with some curse 😜

[@Saleca]

I am still confused on why not have "horizontal alignment" for the element and " horizontal content alignment" for the content of the element.. "Lets call it Justify content and it means align content along the wtv axis and align items for the other axis but this is special because this is not content and you can also have align self" 😂

[@MartynMc]

What annoys me is why do we use justify-content to move block level elements and then just align-items to the same thing on a different axis? Surely it should be justify/align-items to do the same thing dependant on axis.

[@DaMu24]

Hi, watch the video

[@MartynMc]

@@DaMu24 I did, the naming convention is still stupid, you use both content and items to position the same elements regardless id they're a group or not as they're all in a flex container.

[@atrus3823]

I agree the naming isn’t great, but if it was justify-items, what would align-content be called? “There are only two hard things in computer science: cache invalidation and naming things.”

[@TheNewton]

right, alot would be simpler if we could redefine property NAMES with aliases to make more these rules make more intuitive sense than just these rushed committee madeup shorthands alot of which don't even interoperate with specific parts of the spec so if you try them you get no results unless you know there's ANOTHER weird property name that triggers a new combined behavior. 🤢

[@TesterAnimal1]

It’s not like that. Justify is *along* the main axis. Think of it like justifying text. Align is always the cross axis. All depends of the flex-direction