Learn Flexbox in 15 Minutes

🚨 IMPORTANT:

In this video we will cover everything you need to know about CSS flexbox in only 15 minutes. We will cover what flexbox is, how flexbox works, and the different properties you can use to layout and style your flexbox containers. Flexbox is one of the most important and useful layout properties in all of CSS, and is luckily quite easy to understand once you wrap your head around the terminology. We will be covering all of the terminology, by going through live examples of all the different flexbox properties.

If there is anything you feel I missed in discussing flexbox, or anything about flexbox that confused you, please let me know in the comments below.

🌎 Find Me Here:

#Flexbox #WebDevelopment #Programming

[peepoHappyy]

Honesty, my biggest problem is understanding flexbox, and you, my friend, literally made one of the simplest tutorials ever. +1 Sub.

[megoshmego]

This man posted this four years ago and is still saving lives today

[oussamacheta]

that was the best Flexbox tutorial i've watched so far on youtube thanks so much, your channel deserves a lot more subscribers ! keep up the good work

[stratosniper]

Thanks for this. Been coming back to various flexbox videos but I understand it more clear here. I'm putting some timestamps here coz I believe I may go back here from time to time for quick reference

1:00 Getting Started on flex-container
2:24 Concept of Main Axis and Cross Axis
3:20 Why layout styling should be based on Main, Cross Axis not based on horizontal or vertical
3:30 Laying out elements on Main Axis
4:30 Laying out elements on Cross Axis
4:47 Keeping the size of an item / element
5:15 Last way to align item / element
5:31 flex-wrap
5:44 align-content property
6:59 Column layout
7:56 Different properties can be applied on flex items
8:25 Prevent flex item on shrinking size
8:43 Grow flex items bigger
11:33 Overriding Cross Axis Alignment
12:15 Order property
13:01 Why order property should be avoided
13:49 Things to remember
14:19 Shorthand for flex-shrink, grow and basis

[coeurdelicorne]

I'm a university teacher and hope to one day be half as clear and efficient as this masterpiece of pedagogy. Thanks a lot

[danilopriscilla]

mind blowing explanation!!!
surely one of the most concise teachers on youtube.
Believe me...I have not great english skills, but even that, I was able to absorve all the information and knwoledge provided in this video.
I have learned more with you than all brazillian portuguese speakers that I have seen.
Congratuations. You have a real gift to teach.


Greetings from brazil

[Wesm]

Man! You're the best one I have ever met at explaining complex programming concepts. And your channel is amazing. No annoying background music. No ignoring some important information because it's easy for you. Thanks Kyle. You really deserve the support.

[mikedqin]

The Best Flexbox Tutorial I've ever seen. Thanks,

[sablesoul]

This is THE most perfect Flexbox tutorial. Simple, well-prepared, and compact. Great stuff.

[diegocastaneda]

I don't always need to update and create CSS daily, but your tutorials are SIMPLY (literally) amazing! Great videos that are straight to the point. Exactly what I need when I'm looking to refresh my CSS knowledge. Thank you!

[briansnider]

Thanks to your fantastic explanation, after the last few years of heavy flexbox use, I now fully understand flex-basis! THANK YOU!

[digigoliath]

WOW, simply the best! Very well illustrated & explained. And the pace is just right. I have never learnt so much in 15 mins and it is coming from a guy who has spent hundreds of hours on tutorials. LOVE IT! Anybody reading this .... spend your time on this. It is super recommended for its fantastic & valuable content. Totally enjoyable. Great job dude!! Keep doing what you are doing. You will change the WORLD!

[mehulsrivastava]

He's literally the best teacher anyone could have!!

[gyanendramaurya]

Best tutorial in the world. I am a professional working in an organization. I used to do html CSS stuff back in the day but nowadays I'm more into logic building and APIs stuff. Just want to learn about flex to improve my css, tried at many blogs but did not get satisfactory answer, When I saw video from web dev simplified there was an instant relief. Thank you so much for best compact content with no bs like others.

[Amit-jbxt]

you have explained so much in just 15 mins...thanks...
where others talk about top programming language for an half an hour just for views

[MariamAlaa-hgii]

This is the first video to ever clearly explain what flex-basis is -speaking for myself at least. I was randomly scrolling and found this tutorial, and I'm so glad I'm finally able to grasp what it is in such simple and clear explanation! Thank you so much.

[cherubinth]

I like how you reduced it to the point without becoming too abstract.

[confirmedcryptoairdrop]

I still can't believe how simplify this flexbox wahala, to a very easy and simple form. Thank you so much for this. For this kind of tutorial, one needs to pay but you decided to give it up for free. God bless you. You just gained a new subscriber.

[your_utube]

I cannot help but agree with Oussama Cheta that this is the best tutorial a beginner like me has seen so far. Fast paced, yes, but we have pause and other modern accouterments at our disposal. I used to train ICT stuff many years ago and you can see who works at his skills for training purposes, and you are it.

[kanijinho]

I still can't believe how good you are at explaining all kind of concepts, i land on your youtube channel 2 days ago and i almost see half part of it. Even if i'm not an english native speaker i understand you perfectly. You speak fast but very clear and you use very simple vocabulary so for me is really perfect. Also the quality of the sound and production helps really a lot. Congratulations man, for me your are really the Javascript boss on youtube. I hope you will open your course soon. Thank you so much.