CSS Flexbox difference between justify content and align items

what is the difference between justify content and align items in css
With this you will learn how to center elements vertically and horizontally. Or how to align elements to the end or the beginning of the container vertically or horizontally

So in flexbox we have a main axis and a cross axis. When we say justify we are talking about the main axis and when we say align we are talking about the cross axis.

By default the main axis is the horizontal one, but if we say flex-direction: column; now the main axis will be the vertical one

[reycarrillo]

"I hope it's not too confusing" actually you did a great job of simplify it to me. thank you 👍

[sadriansaid]

you solved my confusion in just 2 minutes. thank you

[SumanNath]

Today I learned cross axis means cross axis. Solved the problem. Thanks. You made my day in 1 sec.

[wisdomjordan]

you have made today better. thanks much

[DannaSmile]

Just 2 minutes. That's what I need, thanks

[kevinrivas]

Me super confused, going through all my notes, watched some other videos prior that were 20min long each, just lost! Hit play on this video, understood it in the 1st 30 seconds.. lmfao

[anupamdungdung]

Thanks this visualization helps to understand it in a simple way

[index-Bam]

thanks for this video. It really helped me out understanding it.

[jackmeister]

Thanks bro you helped me out. I was confused when adding flex-direction.
Now i got it😘😘

[khatariinsaan]

Thanks a Lot you have Cleare my Doub't

[oudinia]

Perfect, Thanks a lot, you cleard my confusion in less than 2min. (whatever :) )

[perfectionchizuruoke]

Thank you so much
It was really helpful

[Juliamarsx]

thank u so much, Im better at memorizing visually

[ISoHEoBASSIST]

puta madre, era así de simple?! muchas gracias!

[xnnr]

I am still confused. I am doing a scrimba tutorial on React and the teacher wrote this ".header {
display: flex;
align-items: center;
height: 65px;
background: linear-gradient(90deg, #672280 1.18%, #A626D3 100%);
color: white;
padding: 15px 20px
}"

and this made the items horizontal and this should be justify content that does this?

[mnusne]

Why is it content in the one but item in the other?

[AkiHan._]

its a very good vdo but the sound quality :(

[ManishSharma-ruup]

our voice is too low in the video to understand.. :(

[Furkanh]

thanks, but you can talk a little bit more spontanious. No hate