Learn Flexbox in 15 Minutes

Подписаться 1,6 млн

Просмотров 1,2 млн

50% 1

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/l...
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.
View CodePen: codepen.io/WebDevSimplified/p...
CSS Flexbox Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Flexbox #WebDevelopment #Programming

Опубликовано:

26 сен 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 840

@peepoHappyy 3 года назад

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

@adhayyansingh5682 2 года назад

how did he center the flexbox container itself on the web page?

@Caiser 2 года назад

@@adhayyansingh5682 I'm trying to figure that out too, he had multiple css files and didn't show us the contents of all of them

@york2301 2 года назад

@@adhayyansingh5682 justify content: center; + margin: 0 auto; !

@york2301 2 года назад

@@Caiser justify content: center; + margin: 0 auto; !

@viktorberczeli3009 2 года назад

You Sir are not alone. Somehow this flexbox giving me a headache. I really start to understand as it looks the basic and best thing to any responsive webpage. Practice makes perfect! +1 Sub as well.

@coeurdelicorne 2 года назад

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

@nxgamervi7772 Год назад

I learn more from RU-vid than school....

@mostafizurrahman2694 Год назад

@@nxgamervi7772 🤣🤣

@Dontmesswithmeplease Год назад

Hey Alex, how r you doing ?

@zakeenaqvi2440 Год назад

@Alex Fender you have more humility than the vast majority of professors. I wish my previous professors where like you.

@mike-480 7 месяцев назад

If only all professors had the same aspiration.

@cherubin7th 3 года назад

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

@juanbomfim22 3 года назад

I wish I had this ability

@KeepLearing 3 года назад

I've never realised why I like him the most but I guess he's gave us the clue within the name all these time... 😜

@oussamacheta7106 5 лет назад

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

@WebDevSimplified 5 лет назад

Thank you! I love making videos and have so many more ideas.

@digigoliath 4 года назад

@@WebDevSimplified And I love what you are doing & sharing. Thank you!!

@dextersinister6704 4 года назад

The only thing that could make it better would be to have written material that could be later used as a reference.

@foxjonesofficial 3 года назад

@@WebDevSimplifiedi love u

@aadityasharma6855 2 года назад

"fux bax"

@stratosniper2091 3 года назад

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

@ReligionAndMaterialismDebunked Год назад

Thanks thanks! Very complex for a 15 or so minutes video¡ 💀😅🤝

@deryaertekin-wh6es Год назад

{ "employees": { "employee": [ { "id": "1", "firstName": "Tom", "lastName": "Cruise", }, { "id": "2", "firstName": "Maria", "lastName": "Sharapova", }, { "id": "3", "firstName": "James", "lastName": "Bond", } ] } }

@deryaertekin-wh6es Год назад

4543591958840849 Derya Ertekin

@deryaertekin-wh6es Год назад

@phransixkaylor 3 часа назад

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.

@Wesm 2 года назад

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 4 года назад

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

@WebDevSimplified 4 года назад

You're welcome! I'm glad you enjoyed it.

@digigoliath 4 года назад

Simply the best!!

@sablesoul 4 года назад

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

@briansnider7391 3 года назад

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

@jaydeepdas1408 4 года назад

The way you explained was really amazing! I have learned many new things that I never saw in other videos for flex-box. Crystal-clear and to the point. Thanks a lot!!!

@nidzeksmocni659 4 года назад

The main reason why your videos are the best is that you try to simplify as much as possible, you make sentences shorter without additional unnecessary information(It is basically the key when teaching someone) . You are the coolest and smartest guy i've ever seen!

@diegocastaneda4325 Год назад

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!

@megoshmego Год назад

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

@arslanramay 3 года назад

The best flexbox tutorial. Clear, concise and easy to understand.

@luis.barragan 2 года назад

This is the best tutorial out there for backend engineers who don't want to be overwhelmed by all the CSS theory behind flexbox, just what is needed to start. Thank you!

@skylarw19 3 года назад

Awesome tutorial! Loved that you mentioned screen readers go off of the HTML order, rather than CSS order. I definitely didn't know that and think it's great to know to make sure the things we create are accessible!

@wolfsblessing 2 года назад

This was freaking awesome! Right to the point with all the visual display, not going around. Thanks a ton!

@danyaladmani 3 года назад

Absolute Legend! All your content is extremely well designed and structured and you deliver it very very well!

@snigdhobhattacharya4697 4 года назад

Simple, fast and to the point. Gem of a tutorial!

@danilopriscilla1934 4 года назад

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

@WebDevSimplified 4 года назад

Thank you so much! I am really glad my video and teaching style was able to resonate with you even with the language barrier. That is one thing I always worry about in my videos is that I speak too fast or use too many terms that non-native English speakers may not fully understand.

@danilopriscilla1934 4 года назад

@@WebDevSimplified As we see, your concern and consequently careness about the language issue is working :) God bless you my friend. Thxs for all this effort.

@thepriestofvaranasi Год назад

Hats off to the simplest flexbox tutorial on all of RU-vid. I have seen hours of videos on Flexbox and they kept me confused. This one is a gem.

@mehulsrivastava4754 3 года назад

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

@SelvinsStudent101 3 года назад

This is such a brilliant video! I was very confused about what both of these are and when they are used. This is so informative and clear. Its also amazing to learn how they work together. Thank you so much!

@pankam7800 4 года назад

Best best Flexbox tutorial I have ever seen in RU-vid ...THANKS and thumbs Up

@ralphlargo9728 3 года назад

Thank you so much. This is by far the best flexbox tutorial I've watched online! two thumbs up man!

@ryanbiztech9181 3 года назад

Thank you. This is by far the best FlexBox tutorial I have seen so far.

@celestinnarose 2 года назад

Dude, you rock!!!! Thank you sooo much for this I’m about 2 weeks in learning HTML5 and wanted a clearer explanation of using the

@mukundshridharan7005 3 года назад

The best - so many tutorials but none approach the concept of the main and cross axis -- which immediately makes it so simple ! The BEST Flexbox tute out there !

@MariamAlaa-hg4ii Месяц назад

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.

@ramrod33 2 года назад

Just got into flex boxes and this clarified so much for me. Thanks for the awesome tutorial.

@anhqui19822011 2 года назад

I really appreciate your efforts you spent on the video and the article. I watched and read it so many times but still love it. ❤

@zhenghaizhou6085 4 года назад

You've the best web dev videos on youtube, man! You deserve a lot more subscriptions.

@your_utube 3 года назад

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.

@OrlandoDelgadilloLuna Год назад

Thank you so much for this video. Flexbox has been a pain for me, but the more educational content I watch, the better I'm understanding it, and you make it really easy. I think Flexbox is one of those things that needs to be practiced constantly in order to really get the potential.

@briandacallos4234 4 года назад

You don't know how you changed my perspective in flexbox. Thank you so much

@craigj.4632 3 года назад

Thank you so much. Made the career switch from general software development to web dev and these videos are clear, concise, and have a lot of practical applications.

@BachonKiDuniya307 2 года назад

Thanks This was the best flexbox tutorial on the RU-vid i have seen yet Subscribed!!

@mouradsamy2729 4 года назад

One of the best flex-box tutorials I've ever seen.

@Apfelwolken 3 года назад

Awesome, thanks a lot! Love your tutorials as they cover all the important things and are very well structured.

@ziaulhasanhamim3931 4 года назад

bro you are really great.all others were telling me that use this tag,attribute,property in that moment.but you are explaining this things. so that we can make something creative.i really love your videos.thank u so much

@robertmanigault625 Год назад

This is the best explanation of Flex-box I’ve seen. Thanks.

@yotshmep1224 2 года назад

Came here after going through the Odin Project, and I was so confused reading the explanation on MDN, and your video just made it so clear to me in like 10 minutes, so thank you!

@fata__morgana 5 лет назад

Simple, fast and clear. Amazing work dude!

@WebDevSimplified 5 лет назад

Thanks!

@skafaced102 Год назад

Web Dev Simplified videos are always clutch! He taught me how to write a recursion in one video after I read/watched multiple articles and videos beforehand.

@josuehidalgo163 3 года назад

Wooooo!!! Best explanation ever, after watching a zillion tutorials on the subject I really did think this was super difficult, and you Just made it simple in 15 minutes. Thank you sir! You deserve a million suscribers.

@jeremy1l 3 года назад

This is the best flexbox explanation, short and on point, thank you

@coreyk6766 Год назад

Thank you, the main axis/cross axis explanation really helped me understand it more.

@MdARahim 3 года назад

You are good at making short-tutorial on complex topics not missing any important stuff about those topics. Great!!!

@mosimamamaleka6864 2 года назад

This was easily the simplest and most effective explanation of flex-box ever!!! Web Dev Simplified, you definately holding up to that name

@grimandflinwow Год назад

Probably the best Flexbox video i've ever seen. It's the one i keep coming back to time and time again. thank you so much

@darpananeja4751 3 года назад

Brother, you blew my mind!! The best video I came across!

@kathrynperry2955 Год назад

Wow, great video. Thank you so much for taking the time to create it. I just could not wrap my mind around the concept of flex containers but now after watching your video i see how easy it is to understand.

@briangorman1079 Год назад

this channel is incredible - i hope new people continue to find it!

@michaelwatson9089 2 года назад

Thank you, man. I was going to give up and turn in my code challenge to see how other's finished the challenge, but my mind said let me learn more about flex box before turning in my challenge. I tweaked the settings in my div and was able to get the layout exactly like the design for the code challenge.

@vickyvanadium Год назад

you voice and pace are so conforting to follow. Thank you so much.

@Apeles735 3 года назад

Absolutely amazing tutorial! Keep up the great work!

@Cabrera86 4 года назад

Great Flexbox tutorial my friend, you truly simplified any complexities regarding this amazing web developing tool. SUBSCRIBED!!!!

@mentaeamare3888 4 года назад

Thank you so much for the detail concise explanation you have given us on flexbox property. Keep lecturing us. You the best!

@shaunhayward Год назад

Brilliant tutorial. Clearest explanations I've seen. Thank you!

@meermahmudurrahman4013 4 года назад

You didn't only simplified the web but also my life! Thanks dude!

@perishedfirestorm555 Год назад

Man you always explain it plain and simple! Amazing work bro keep it up.

@yazmat182 3 года назад

dude, THANK YOU SO MUCH!! I''ve been a desktop developer for years, trying web based tec now and I just couldn't understand css positioning. this helped a lot!!

@javxa 4 года назад

Awesome tutorial. First tutorial from this channel and immediate sub. Best explanation for shortest amount of time!

@alexanderfindlay4463 3 года назад

Best Flex Tutorial I've seen, information is much clearer now. Thanks Alot :)

@ronster141 3 года назад

Excellent tutorial. Easy to understand, not overcomplicated, no stupid jokes, well-spoken. You have a new subscriber Amigo.

@GoofyGoober6694 2 года назад

I love this channel your the only time where what Ive learned in css doesnt go out the other ear.

@birdbrainsolutions6112 4 года назад

This is the second video of yours that I have watched and I love them!!

@holgip6126 2 года назад

Ohh - i always struggled with flexbox - but showing the axis made things clear for me now - thank you!

@jannyney 2 года назад

Best tutorial I've found so far, thanks alot!!

@AbhishekMohantyThatsIt 3 года назад

Learn Flexbox in 15minutes - Justified. Thanks a lot for the amazing tutorial!!

@ltd_music Год назад

I learned more in this video than in 10h+ flexbox courses. Thats gold content!

@garettclement6671 Год назад

Wow. Every time I watch your videos, even of things I know, I learn something new. A very useful channel

@gabalabe1 2 года назад

Dude... Literally the best example for flex box I've come across. Thank you my friend.

@TheDeadlyDalek 2 года назад

This is a great reference video. I return to it each time I need a refresher.

@paulojelade3380 3 года назад

You are the best man ive subbed with notis on cuz of how good this is cant wait for new uploads.

@aBeerFromHere7994 2 года назад

Very good and compact explanation. I had to watch some parts twice to process the information, but now I get it. Thx.

@av6004 4 года назад

Thank you very much. Very informative and easy to follow. One of the best videos on Flexbox.

@franciscomontesgomez2067 Год назад

Once again, excellent job! Finally, I got to understand how it works! Thanks!

@ianlewin8888 4 месяца назад

Thank you, this clears me a lot of confusion about flex box

@samuelboone7495 2 года назад

Thank You, I've been stuck on this for a bit now, And I'm finally starting to understanding it now!

@ManojDeshwal 3 года назад

one of the best flexbox video tutorial. You are excellent buddy. 👍👍

@chairmakerPete 2 года назад

Really excellent video. Easy to follow, clear narration, every point very well illustrated with a clean example. Top marks! Subscribed.

@romanext921 3 года назад

This is gold, so well prepared! Ur like a css guru, Thank you so much!

@kerimtim Месяц назад

Thanks Kyle for making flex-shrink, flex-grow and flex-basics easy to understand

@Amit-jb5xt 4 года назад

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

@jthomasaurus 4 года назад

I know flexbox pretty well, but still learned a couple of things in this video. Thanks for another excellent video!

@squattingtaiwan Год назад

I'm amazed by the clarity of this tutorial.

@SachinGuy 10 месяцев назад

Any web concept you teach becomes so easy to understand. Thanks buddy for the effort.

@vilassa 2 года назад

Great tutorial, you made flexbox building process easy to understand. Thanks

@TheEsteban1979 2 года назад

You certainly gave me hope that I can learn this thing!!! thank you for your time and effort in making this video!!!

@marcelotrader3105 3 года назад

Congrats, man! One of the most underated tutos on the web ever. Keep the good work. PS. waiting for your Bootstrap 5 tutorial.

@poncygit123 4 года назад

Thanks for that, really helped me understand layouts with flexbox! Very useful video.

@matthewsjardine 2 года назад

This is simply brilliant, and your videos are A+. I will be joining your Patreon when payday comes around. Your videos have added more value to my life than 95% of the stuff I watch on the internet.

@justrobin2176 Год назад

I was looking for flex-wrap: wrap. I knew I'll found it. Thank you so much. ;)

@markeem321 3 года назад

I’m so happy found your channel. You explain all these things so well(Html, Css,Js,React) and that saved a lot of my time. It would be nice to see the behavior of flexbox and grid with a small example for a desctop and mobile view.