HomeОбразованиеRelated VideosMore From: LearnWebCode

Flexbox Tutorial (CSS): Real Layout Examples

13539 ratings | 476464 views
Learn how to use Flexbox to create different layouts. Link to my new "Git a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Link to code used in this video: http://codepen.io/anon/pen/VKxRoE?editors=1100 Link to more about browser support: http://caniuse.com/#feat=flexbox Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (1074)
Tomáš Bartoš (13 hours ago)
great video thank you so much
Imran Sheikh (17 hours ago)
i subscribed...clicked bell icon and like video......can i do anythingmore ....THANKS A LOT.. the great talent of teaching.
Wojtek (1 day ago)
I'm just making a website on commission for customer after a long time of break. Few days ago I got to know about flexbox and I didn't understand it until I watched this video. Great job!!
John Cricket (3 days ago)
I just bumped onto your tutorial, sort of speak. Mate, I ain't been using css for a very long period and I know very well the curved and bumped road that leads to a column layout using floats or centering vertically a piece of text using all sort of tricks (including javascript). Oh glory! I didn't know flexbox and it is indeed awfully simple and obviously clear. If I've only had it ten years ago when I was fully involved in front-end site developing. I thank you so much for your cristal clear explanation and I thank the web gods to put you on my path. Keep up the good code. Take it easy, mate.
Sam Wood (5 days ago)
This is the BEST video out there for explaining flexbox. Amazing... 10/10.
Jude Bobinihi (5 days ago)
you don't think it's easier using grid display for the column bit?
Miodrag Veljovic (6 days ago)
One of the best code explaining video I have ever seen: Detailed, thorough, spontaneous, clear... Amazing! Thanks!!
Gloria Lois (7 days ago)
I did learn something ! Thank you very much
Mohammad Foroutan (10 days ago)
awesome i can't describe how it is useful , thanks.
Suraj Kushwah (13 days ago)
f*ck bootstrap, I am gonna learn flexbox.
gustavo3322 (13 days ago)
I am building a site layout, have a top bar using div, and two columns underneath it each with width:50% as to cover the page 100%. The problem comes when I resize the browser. I am trying to do when you resize the browser, the columns stack on top of each other, which they do, however there is a huge empty space on the right side of the screen, instead of the columns occupying all of the screen as they stack on top of each other. Any suggestions?
kipkoech (13 days ago)
Thankyou so much
Rona Dars (14 days ago)
i really like how you explain everything!
vivek sai (19 days ago)
'Stubborn, not budging, throwing tantrums'..does remind me of someone...and yeah flex box too.
Mumbai Highlights (20 days ago)
Best explanation yet on this topic .......thank you for explanation is there any option to create a popup using CSS and internal JS......
Mumbai Highlights (17 days ago)
@Erik Mueller Do you have any example .......that good for me please share if you have ?
Erik Mueller (17 days ago)
You could do a javascript modal, or a javascript alert box
kite runner (22 days ago)
Grid or Flex?
Ana F (23 days ago)
Found this awesome video thru another Udemy course Make a YouTube Clone from Scratch: JavaScript PHP and MySQL . I was so impressed with your teaching style that I went ahead and bought 2 of your courses there. I just wish I saw these courses 2 years ago.
Neer Thapa (25 days ago)
I just want to see the kitty :)
Jalal khan (25 days ago)
really bro i love the way u centered the text there! stay happy n cool ever mate....
CuddlyBunion341 (25 days ago)
1:20 width: 100% ?
Nkosi Phillip (26 days ago)
This video gives a practical demo of all the flex-box concepts I've learnt over the past couple days.
Hugo Chavez (27 days ago)
As a backend developer I admired CSS for its many possibilities and options. But at the same time I never understood, why the alignments, centering and positioning were *ucking complex and hated CSS. After this video I think the backend developers are much more happier about the flex box than the frontend developers. :) Being a Turk, born and grew up in Turkey, living in Germany for more than 14 years and not using English in my everyday life, I was able to understand all parts of your tutorial. Very clear and simple language, very precise explanation with very short and smart reasoning. With just one word: PERFECT!
Martin Martian (28 days ago)
Wow just wow. Big thanks to you! I wish I knew this during my thesis days 5 years ago(if its available back then). Again, THANK YOU!
Kelly Martin (28 days ago)
Brilliant! You sir, are a fantastic teacher. I've been around for a long time, and in my opinion, you're the best I've ever experienced. This includes college instructors.
Atif Ahsan (29 days ago)
wow !! Great Great Tutorial.. Easy way to learn the true concepts of the flex box
anand kumar (30 days ago)
Awesome tutorial . Got amazing understanding of flex box. Thanks you so much for this tutorial.
Rimantas Danilevicius (1 month ago)
Cristal clear tutorial and you also covered and did not forget mobile! You natural!
Arii (1 month ago)
someone please help me. i want to retrieve data from database and display it in a grid layout.how can i do that? i've been searching for the solution since last week.
Patrick Minega (1 month ago)
Best day of my life
Yurdnei Costa (1 month ago)
You're a legend!! Great video
YouTuber (1 month ago)
flex magic :)
Dziaji (1 month ago)
Exactly what I was looking for. Super easy, super powerful. Great vid.
Ivo (1 month ago)
Amazing
Mark Julius (1 month ago)
Thank you Sir. You are amazing!!
ינון אלבז (1 month ago)
WOW!!!!!
moshe oz (1 month ago)
Thank you so much!! I loved it😍
alskywell (1 month ago)
Honestly, the best tutorial on flexbox I've seen, so far. You have a talent for teaching. Thank you!!!
Absolutely perfect!
Miwox Fitness (1 month ago)
Bratan you‘re king many thanks
Umar Ejaz (1 month ago)
your explanation and every thing including voice quality is awesome
KN 2 (1 month ago)
Such a great video... thanks
Rimantas Danilevicius (1 month ago)
Very useful and informative presentation. Thank you!
Pa Mak (1 month ago)
Awesome!
Gabriel Beauchemin (1 month ago)
very clear thanks
BloodyClash (1 month ago)
OMG...SO extreeemely perfectly and easy explained. Thank you so much :) From now on : FLOAT my ass :D
Suákata (1 month ago)
Best video on flexbox, thanks Brad!
prashant saini (1 month ago)
Being a mobile app developer, I can say this is the bestest video which made my interest to learn HTML. I used to do a little bit of HTML in my earlier times of Phonegap/Cordova... but this video is like a PRO level tutorial for anyone.
Olga Brycht (1 month ago)
Thank you, this was AWESOME!!
Jalal khan (1 month ago)
pull out some more secrets like this in web code... great idea mate...
Kitten (2 months ago)
Hello! I'm a bit lost with flex-basis : n% Can you combine it with flex: n ? Like .container {flex-basis: 40%;} and .element {flex: 2;} ? Does it mean the .element will take 80% of the space? What happens to the other elements? Do they only get 10% each? Also do you need to change the flex-basis according to the number of elements? Like if I have 3 elements it necessarily has to be 30% to be equally distributed? but if I have 4 elements does it change to 25%?
Khavan Tran (2 months ago)
This is one of the best tutorials I have ever seen. Thank you!
BOON FONG ONG (2 months ago)
This is unacceptable 😂
Laurie Stanhope (2 months ago)
The way you explain this whilst showing visual clues works perfectly - I found this so easy to understand! cant wait to see more of your content, this has been very helpful - Thank you
An sh (2 months ago)
Very nice.
PadMAD3k (2 months ago)
Thanks! No more annoying floats!
Dragan Krstic (2 months ago)
splendid
Movie Kernel (2 months ago)
thanks a lot
mierpub8lam (2 months ago)
You have an excellent presentation style.
Awesome video, Thanks #LearnWebCode
Paulo Massarde (2 months ago)
And that is how teaching should look like. Many thanks sir :)
VAJRAPU BHARATH (2 months ago)
Helpful and thanks for the tutorial
gwuiin Kim (2 months ago)
amazing tutorial
Iheb Haboubi (2 months ago)
this tutorial explains it in a very simple way, now I know how to work with flex, thank you so much!!
Joe Bert Sembrero (2 months ago)
Hi, Thanks! I'm 2019 kid 😊
Gregory Pots (2 months ago)
How does he define the pixels with his mouse?
D4rkS7der (2 months ago)
This is great video. How about next part with advanced flexbox techniques?
D4rkS7der (2 months ago)
Which one, then? :D
BRIJESH KUMAR (2 months ago)
no
GD MOD (2 months ago)
Finally I know flex grid system. Awesome Explain .
Abdullah Ali (2 months ago)
helped me a lot, thanks my friend.
Ben Chilcott (2 months ago)
this video is sponsored by flex box
Allformyequine (2 months ago)
Excellent, you have THE MOST amazing teaching style, thank you !!! Keep up this amazing work we are loving it!!!!!!!
Kenneth Ballon (2 months ago)
Thank you for this. It's more clearer now to me.
Cool108 (2 months ago)
1000th comment, oh yeah. Great video and very helpful!
Caner Sezgin (2 months ago)
Amazing, thanks !
Munir Mahmud (2 months ago)
This is the best flexbox tutorial, I've ever seen. Thank you very much
Jamie Barmakian (2 months ago)
i think you just saved my career
A. Joshatt (2 months ago)
Best flexbox tuts I've ever seen. Examples does cover more than ordinary learning.
Stuart Moore (2 months ago)
I like your delivery style... :)
Pakistani Gamer (2 months ago)
I've been learnt alot of things from you I think you should have 1 million subscribers from most of web designers maybe I will tell to my besties to understand the hard concepts from you <3
Andrea Vahe (2 months ago)
Thank you for the best flexbox tutorial!
Troy Borges (2 months ago)
22:45 it changed my life forever. "margin: auto" 😍
Darrell Malick (2 months ago)
Really well done tutorial. Thank you.
Boba Defett (2 months ago)
Thanks so much for this, CSS has been kicking my ass. I just finished freeCodeCamp's Responsive Web Design project, and got my certification, but CSS was a nightmare for me the whole time. I wanted to just finish and say fuck CSS until later, but after watching some videos like this I feel much better about CSS. I also went and watched some of Online Tutorials videos where he does some magical stuff with CSS which made me want to get better at CSS. Thanks so much for this video.
Cheongah Yi (2 months ago)
Brilliant! Thank you. I've been using floats throughout my entire web dev class until now.
An Nguyễn (2 months ago)
great
Henry Yap (2 months ago)
Great lesson, spoke in clear and slow pace with great examples to follow.
Pallikoodam (2 months ago)
Awesome
Al Soltan (2 months ago)
Great and informative video. Thank you!
Gagandeep Singh (2 months ago)
I patted myself
Danny Dai (2 months ago)
very clear explanation and good examples.
Zakarie Haji (2 months ago)
This should have a price on can't be free
Paul Brown (2 months ago)
Thumbs up for the cat yawning lol 😂
Hemant Pednekar (2 months ago)
Thanks:)
Nick Newman (2 months ago)
you dint show all the HTML and some CSS for the 5 red boxes? i took a guess at what it should be, but i couldn't get my numbers vertically inside the box :( best i could do was half way in.
Riven Apwbihls (2 months ago)
Thankyou very much for great video
Effective Code Academy (3 months ago)
Great Video! Well Explained! 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
Gerald Ringer (3 months ago)
Brad Congratulations. Love your teaching approach. I will definately show my appreciation by buying some of your titles in Udemy. Keep up the good work. I have been trying to learn flexbox for several months. I spent a lot of time learning Bootstrap 3/4 (which incorporates Flexbox) but now I realize how powerful and efficient flexbox is. I just started watching your Videos. I have replicated your code in the MS visual code editor.
Effective Code Academy (3 months ago)
With new CSS features like flexbox and grid system, bootstrap is becoming less and less of a necessity. However it can still be useful, especially when used with sass so you can modify some of the classes to better suit your needs!
Raphael Pinel (3 months ago)
Amazing! Really useful, concise. Perfect!
Buddha Nag (3 months ago)
Nice
Dor Zvulun (3 months ago)
Thank you for that.. probably saved a lot of Devs lives...
Hayosiko Takagumi (3 months ago)
Somehow you managed to outdo Traversy on this. His vid is great but yours is even a bit better.
ubuntu ubuntu (2 months ago)
hey...he is good...and one more good teacher is steve griffith. search him youtube. you will feel blessed. these both guys teach us like a child :)
Fd Mac (2 months ago)
same thought. i usually think traversy video on every tutorial is the best but he outdo him on the flex one.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.