Learn CSS Flexbox in easy way

cssiseasy
cssiseasy
23,578
6
Published 2024-06-22
Hi, today's video is dedicated to flexbox, one of the most difficult topics in CSS! But despite this, flexbox can be studied - and it's 100 times easier to do it with me, because I've already collected all the properties and values in one place and added cool animations.

I've been teaching people web development on my instagram for a year and a half and now I have about 76k followers. I mostly do CSS guides and have helped tens of thousands of people.

I've now transformed the lives of over a hundred people by writing my book "Recharge your CSS".

Web development problems? Fears that have haunted you because of past failures? Wanted to build a strong foundation? Needed a great teacher? If you've been having trouble with CSS, you'll definitely benefit from this book. You can learn more at this link - csslaunch.com/

Music:
Lo Fi Type Beat - Lovesick (copyright free)
Lo Fi Type Beat - Sweetheart (copyright free)

Timestamps:
00:00 Intro
00:25 display: flex
00:46 flex-direction
00:57 justify-content
1:30 align-items
1:47 flex-wrap
2:08 gap
2:16 align-content
2:50 order
3:09 flex-grow
3:30 flex-shrink
3:43 flex-basis
3:59 "flex" shorthand
4:09 align-self
4:22 Summarize
4:49 My e-book
All Comments (21)
  • @cssiseasy
    💥Are you struggling with CSS and want to improve your knowledge? Then check out my step-by-step 480+ pages e-book here: csslaunch.com/ (Trusted by hundreds of people
  • @amrsaber3339
    there is no such value `space-equal` the correct is `space-evenly` please prepare well before doing such mistakes!
  • @-Barny
    Crazy amount of information in less than 5 min. Thank you, Sir ❤
  • @sheikhspeare6637
    Note that the main axis is always defined by the flex-direction. If direction is row, main axis is horizontal (x-axis in 2D coordinates) and if it's column, the main axis is vertical. The cross axis will be perpendicular to it. Also, the direction of justify and align properties depends on this as well.
  • @0cactus
    You have a talent. Just explained an important css topic and made it easy to begin understood.
  • @royandescartes
    you sir just earned my sub. thank you. although i have beaten flex garden many times before, (flex: wrap-reverse; had me stuck for a while lol) it is ALWAYS good to keep the mind sharp with new tutorials and lessons on web development. THANK YOU
  • @arifkasim3241
    Extremely intuitive when you explain it like this. You need to follow this format to explain other topics also. Congratulations!
  • @reicchi
    Such a great and straightforward video, your delivery is very clear and examples are understood right away. Will you perhaps be making one on Grid layout as well? Looking forward to more of your videos!
  • @Zionnod
    Simple, practical, helpful, thanks!
  • @TheManiacc45
    This is awesome you made it easy to understand in a short time
  • @mateusb09
    The keyboard sound was annoying/repetitive but other than that it was a wonderful video
  • @CherryMakesGameplays
    content so good, that algorithm showed me thus even though you have less views and subs!!
  • @sankalpsharma3238
    Keep this series going bro , full support from me (only mentally😉, not physically 💸😏)
  • @danielimatteo
    This is amazing! How do you edit these videos and animations??
  • @Mohammed.V2
    I am happy that u got this channel earlier and i saw you course it is very good and have interest in it but....