Thanks for helping me learn to love CSS. Flexbox has been a blindspot for me way too long. Not any more thanks to you teaching. Great fun! Keep up the good work!
Man you're such a blessing to this learning community. Whenever I have trouble understanding anything css, while reading from external sources, I come to your channel and all my doubts get cleared. It's amazing.
No RUclipsr has earned a subscribe from me THAT easily! After hours of trying to figure this out, you got through to me in about 20 seconds (at the 7:00 mark). Dude, you rule!
Nice video, personally for me what made me understand better how "align-content" works is the "both of them with grid" video section, thank you as always! :)
I absolutely love your videos! I wish I could find someone who explains things as well as you for JavaScript too. Your Css tutorials really did make me fall in love with css!
Hi Kevin amazing video!! I just wanted to say I started coding because of you. You have Been my Inspiration from day 1. Love your videos and keep it up.
I love you videos because focus on small topic that will improve your works perfectly I will call this content of videos “Anonymous Soldier” That mean small thing you won’t notice but exactly these things do more than you thought
Heads up! align-content also applies to block and table contexts. A common way of cancelling out any flex or grid related properties would be to add display: block, for instance at a certain breakpoint. So better be careful with doing that in combination with align-content, since it could cause unexpected behaviours. This was introduced in Chrome 123, Firefox 125 & Safari 17.4, and has apparently been in the specs for years.
Thank you very much for your videos. That makes me better understand web and better do my sites. There is one thing i want to ask you: speek a little slower, please, it is very hard to katch the idea for people like me, when the level of english is not so high. Thank you very much again!
Vertical alignment of course. If I have a row with 3 testimonials or comments, 3 of them in the same row (on big screens of course). I want the footer to be really at the bottom, which contents the author of the comment, even when he just commented one word instead of ten lines. So, I don‘t want the footer to be right immediately after the comment, below, but I want it at the bottom. I achieved it after several experiments and using align-self-end (Bootstrap); the flex-end in the CSS file didn‘t work. I used a 3rd. party code, and the parent: flex and flex-column because all items are in vertical alignment.
Align-items - Align your items along the Y-axis (it changes to X-axis when the flex direction is column) Align-Content - It is much more like justify-content property but works in flex-wrap
Flexbox can be confusing when you do alignments and it does absolutely nothing. Now it makes just a wee bit more sense. The problem is there are 50,000 ways to do the same thing and when you make changes and nothing happens, that is when you start ripping your hair out.
Excellent video and topic! Could you please make a video on LottieFiles and how to integrate them in a website? Perhaps a loading animation or something… thanks 🙏🏻
didnt watch the video but basically for both `align` and `justify` `content` aligns or justifys the invisible `grid` or `flex` areas(columns and rows) `item` aligns or justifys the stuff inside those areas for example you can have a, grid with two 1fr or 50%, 50% columns lets say the total width of the grid is 100 so two of the content areas are 50 if you have an element with the width of 20 in there and you dont wanna stretch it but center it, you can use justify-items: center
Is it me or there is a mistake in your page? Both containers are labelled align-items. Surely, one of them is supposed to be align-content? EDIT - ah okay you fixed it later
Am I the only one who thinks the specs on Flex and Grid are inconsistent? I mean, you can use justify-content: center; by default, but then you need flex-wrap: wrap; to use align-content: center; As much of an improvement Flex was to float, this still doesn't feel 100% where it should be. The fact that people constantly confuse one with the other indicates this point.
Your content is always great, however when I listen with headphones there's always a problem with the audio sounding kinda (really) bad. I know you have a good mic so it can be fixed by moving the mic a lot closer to your mouth and decreasing the gain or sound dampening your office. Thanks!
@@KevinPowell audio sounds great. idk what Daniel is talking about. I'm actually not sure how anyone can only listen to your videos since it's a very visual topic.
@@KevinPowell Yeah its possible and it seems to not bother anyone else. Its just lots of reverb that I apparently am sensitive too. To compare you could try a quick mic test doing that thing with reduced gain and decreased distance and compare with headphone and make a judgment call. It is noticeably more reverb than average but again it doesn't seem to bother most.
for specific item you can do it using align-self: end/start/stretch/center on the item
Thanks for helping me learn to love CSS. Flexbox has been a blindspot for me way too long. Not any more thanks to you teaching. Great fun! Keep up the good work!
Man you're such a blessing to this learning community. Whenever I have trouble understanding anything css, while reading from external sources, I come to your channel and all my doubts get cleared. It's amazing.
You just enlightened me in a way not article did so far regarding these two types of CSS rules, THANK YOU, KEVIN!!!
No RUclipsr has earned a subscribe from me THAT easily! After hours of trying to figure this out, you got through to me in about 20 seconds (at the 7:00 mark). Dude, you rule!
Nice video,
personally for me what made me understand better how "align-content" works is the "both of them with grid" video section,
thank you as always! :)
Awesome, Kevin! You have one of the best youtube channels nowadays! I love spending my spare time watching your videos! Thank you! 🙌
I just built an illustration of a mobile device, and flexbox align and justify dawned on me. Thanks for the content Kevin.
You're awesome! even when I'm not woking time I spend it seeing your videos. Thank you very much to YOU and your content!!!!!
Thanks Kevin, that makes a lot of sense and explains why align-items and align-content often didn't respond as expected.
I absolutely love your videos! I wish I could find someone who explains things as well as you for JavaScript too. Your Css tutorials really did make me fall in love with css!
Hi Kevin amazing video!! I just wanted to say I started coding because of you. You have Been my Inspiration from day 1. Love your videos and keep it up.
Thanks!
Thank you so much!
This really helped me wrap my head around the difference. Thank you!
Sir your teachings are blessing upon us, Thanks again!! ♥
lol I was waiting for place-items or place-content - as soon as I was about to write, you talked about it - love your vids
This occurred with me just today, and boom here I got a proper video on it too 🔥
Thanks for helping me understand align-content & align-items differen. (7:20-7:30) !!!
Thankyou! I was searching for this only
Thanks for fixing the title of align-content. I was starting to get anxious 😬
Thank you! I always watch your video to solve my front end mentor lol!
Man I learn so much in all your videos! Thank you so much for these
can't thank you enough! understanding it much better right now.
align-items: center and justify-content: center is a lifesaver. 😉😆
I love you videos because focus on small topic that will improve your works perfectly
I will call this content of videos
“Anonymous Soldier”
That mean small thing you won’t notice but exactly these things do more than you thought
Thanks Kevin for this helpful video. 👏
When it comes to CSS, RUclips is made only to watch videos of Kevin Powell!
🤣🤣
Woahh i just started learning flexbox today😂thankss
God Bless you for this. Thanks
Heads up! align-content also applies to block and table contexts. A common way of cancelling out any flex or grid related properties would be to add display: block, for instance at a certain breakpoint. So better be careful with doing that in combination with align-content, since it could cause unexpected behaviours.
This was introduced in Chrome 123, Firefox 125 & Safari 17.4, and has apparently been in the specs for years.
I learned good css cause of you thank you
Awsome tutorials Kevin. Thanks a lot.
This was wonderful, thank you!
can we say that Kevin is kind of a wingman?
CSS❤
Outstanding!
thanks my understanding better now
I can NEVER remember the differences between these two!
Thank you !
Thank you very much for your videos. That makes me better understand web and better do my sites. There is one thing i want to ask you: speek a little slower, please, it is very hard to katch the idea for people like me, when the level of english is not so high. Thank you very much again!
Vertical alignment of course. If I have a row with 3 testimonials or comments, 3 of them in the same row (on big screens of course). I want the footer to be really at the bottom, which contents the author of the comment, even when he just commented one word instead of ten lines.
So, I don‘t want the footer to be right immediately after the comment, below, but I want it at the bottom. I achieved it after several experiments and using align-self-end (Bootstrap); the flex-end in the CSS file didn‘t work. I used a 3rd. party code, and the parent: flex and flex-column because all items are in vertical alignment.
It's funny that you and I can both be madly in love with CSS without being jealous of each other.... 😜
Thank u again.
have you created any video for aspect-ratio? i don't understand what is aspect ratio and how it works really
Thank you sir...
place-content: center - who knew about that? - nice one.
Very usefull!
Align-items - Align your items along the Y-axis (it changes to X-axis when the flex direction is column)
Align-Content - It is much more like justify-content property but works in flex-wrap
For cssbattle the align-content can be quite useful
I miss when it used to sound like "friend and friends" I always felt like the friend singular was addressed to me haha
11:02 - Congrats 🎉🎉 Thanks for letting us know that your h1, paragraph, and then the div with buttons are all your direct children! 🤪🤪
Flexbox can be confusing when you do alignments and it does absolutely nothing. Now it makes just a wee bit more sense. The problem is there are 50,000 ways to do the same thing and when you make changes and nothing happens, that is when you start ripping your hair out.
Haha, I know what you mean. over time you start to figure it out a bit more, or at least tricks on figuring out why it's not working :D
so display: grid;
place-content: center; will help some times.
Mind reading @ 7:49
5:34 Forgot to cut
haha, oops
A big correction: YES, you can control the individual items by using align-self.
Excellent video and topic! Could you please make a video on LottieFiles and how to integrate them in a website? Perhaps a loading animation or something… thanks 🙏🏻
didnt watch the video but basically
for both `align` and `justify`
`content` aligns or justifys the invisible `grid` or `flex` areas(columns and rows)
`item` aligns or justifys the stuff inside those areas
for example you can have a, grid with two 1fr or 50%, 50% columns
lets say the total width of the grid is 100
so two of the content areas are 50
if you have an element with the width of 20 in there
and you dont wanna stretch it but center it, you can use justify-items: center
Can you give examples of where you actually use everything you talk about in real life work you do?
Hi please create video about E-mail Signature This is challenge for this month 😅 please
I haven't made an email signature in at least 7 years 😂
make it simplier pls
Only pro can understand your videos
His videos are shit! I barely understand too much unecessary info on the background!
Is it me or there is a mistake in your page? Both containers are labelled align-items. Surely, one of them is supposed to be align-content?
EDIT - ah okay you fixed it later
Am I the only one who thinks the specs on Flex and Grid are inconsistent? I mean, you can use justify-content: center; by default, but then you need flex-wrap: wrap; to use align-content: center;
As much of an improvement Flex was to float, this still doesn't feel 100% where it should be. The fact that people constantly confuse one with the other indicates this point.
7:06
5:19 Nope, the reason that "space-between" didn't work is that you typed out "jusify-content", not "justify-content" 😂
create progress bar
baseline
Your content is always great, however when I listen with headphones there's always a problem with the audio sounding kinda (really) bad. I know you have a good mic so it can be fixed by moving the mic a lot closer to your mouth and decreasing the gain or sound dampening your office. Thanks!
I did have some levels issues with this one and had to boost things in post, so maybe that didn't help matters with this video?
@@KevinPowell audio sounds great. idk what Daniel is talking about. I'm actually not sure how anyone can only listen to your videos since it's a very visual topic.
@@KevinPowell Yeah its possible and it seems to not bother anyone else. Its just lots of reverb that I apparently am sensitive too. To compare you could try a quick mic test doing that thing with reduced gain and decreased distance and compare with headphone and make a judgment call. It is noticeably more reverb than average but again it doesn't seem to bother most.
@@cechmaster Getting a little hostile lol, try to keep a level head and assume less things and you wont sound so... idk... stupid?
You can speak slowy
first!
@CODE WITH CYRILLE uhmmm... ok?
Thanks!
Thank you so much!
Thanks!
Thank you so much (and sorry for missing this until now!)