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

Flexbox Tutorial (CSS): Real Layout Examples

9455 ratings | 326793 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 (891)
Satya Prasad (21 hours ago)
Superb.Thanks flex box for making my life easy
Mahesh Kumar (2 days ago)
MSK Chess (3 days ago)
Thanks bro video was 2awesome!
ybocktor UI (4 days ago)
You are awesome in explaining, simple and get into the core of understanding. Thank you so much, you've added a lot to my flexbox recognizance.
EL GUEDDAR abdelwahed (4 days ago)
Merci pour le partage d'expérience, c'est très intéressant
Awanto Magaret (5 days ago)
Anyone ever tell you you're awesome? Cus you're literally changing my life. Thanks
Zoran Šandrić (6 days ago)
great video
Nelson Fernando (6 days ago)
What is that cursor?
Nelson Fernando (6 days ago)
Sanesh Nayar (8 days ago)
Thank you for the explanation.🙂
TheJeko002 (8 days ago)
where have you been all my life (yes, like Rihanna song)
Soleil DeParis (9 days ago)
Thanks alot. i love your tutorials and learn a lot. ;-)
dotunn (10 days ago)
finally someone who can explain to right brained creatives like me
Jonathan Phillips (12 days ago)
Great Video.....very very helpful. Thank you so much.
Uriel667 (13 days ago)
Thanks for the video!
Martin Mcdonald (14 days ago)
0:06 no flex zone
A.Hajdo (15 days ago)
Great tutorial man, thanks. Very well explained. I understood everything.
Gabby Cornelio (15 days ago)
Thanks! great video
Garima Singh (15 days ago)
Very helpful thank you !
Aish_tech (15 days ago)
Thank you so much for the wonderful tutorial!!
Xo xoo (17 days ago)
Amaaaazing, this is what I needed! Thaaank youu a lott
T K Gaming (17 days ago)
Now I can FLEX better than Ricegum and Logan Paul. 💪
Raul Cubila (17 days ago)
clear as water !!!!1
SAI KAMAL DIDIGAM (18 days ago)
Super helpful. Thanks much for video
Akash kunwar (18 days ago)
The best vedio tutorial I have ever watched
Ionut Ciuta (23 days ago)
you, kind sir, are the real mvp <3
Sweara Ahmed (24 days ago)
You teach real good. Can you make a tutorial on CSS transition-property? and also about how to fill text with a photo.
James Foreman (25 days ago)
Isabel Phillips (29 days ago)
I'm just 7 minutes into this video and I'm already enjoying this.... I love the way you said "Hmm, I'm the the only child" ... So funny, let me continue the video
Ori Bengal (30 days ago)
Wow! Thank you! I just discovered Flexbox tonight, but... it became very clear very fast that without it, I'm going to have to add a zillion media queries, etc... Your tutorial was top-notch, and helped a LOT.
Jesus Connects to God (1 month ago)
examples are best ways to learn things yayyy!! yipee!!!
Kamrul Hasan (1 month ago)
Hea man how are you !. Your all tutorial is so meaning full and help full
pradeep kumar (1 month ago)
Great video thanks
Jovana J (1 month ago)
Great tutorial, and great sence of humor, your tutorals are very interesting and helpfull. quick question: how did you set up your mouse pointer to show you dimensions in pixels by selecting anything on your browser. We tried to find plugins etc but we failed badly :(
Bruno Mendes (11 days ago)
Jovana J if you use a Mac that’s a screenshot mode... you press cmd + shift + 4 click and drag to see the dimensions.... press escape if you don’t want to save the screenshot
Ammanna N (1 month ago)
Very very nice
Mehmet UĞUR (1 month ago)
ahmed durani (1 month ago)
sir why left side goes first when see in tablet responsife mode ?
ahmed durani (1 month ago)
thanku very much ..really helpfull
Pascal Nijhuis (1 month ago)
Hello! Can someone tell me what are the difference between Bootstrap or Flexbox? I have read a lot on the internet, but still I can't find it out what better is.
Nabil Fannane (5 days ago)
Pascal Nijhuis flex-box layout is a CSS3 web layout model , Bootstrap however is a free and open-source front-end framework for designing websites and web applications.
Hashim Warren (1 month ago)
If you like this video, his Udemy courses are awesome. He starts with the problem, then rolls out the solution, and doesn't skip ahead or bury you in jargon
BlueIceAce (1 month ago)
Super super awesome, thanks for the tutorial.
Sheik Abdullah (1 month ago)
Wonderful tutorial man., 10000 likes for it., please upload grid css tutorial like this.,
Kwoncheol Shin (1 month ago)
Cool. I do love this video.
One of best tutorials on flex.
Godspower Osasu (1 month ago)
Flex is hard. Grid is easier
Alex Laurin (1 month ago)
Thank you, i've been studying HTML and CSS and Flexboxes have been confusing me for the longest time and your video helped me clear things up. You're a life saver!
Davy Zeng (1 month ago)
super good man
Adriana Rodriguez (1 month ago)
GREAT TUTORIAL!! I Literally just created a good 5 lessons out of your first 10 minutes to teach in my classroom! Thank you!!!
Addi (1 month ago)
You are very Cool
Mel O (1 month ago)
Wow! have been swimming around tutorial land for 2 years now and you are by far the best at explaining and giving examples in a structured, easy-to-follow, tutorial. Thank you!
Tonny Sanjiao (1 month ago)
Thanks man, great explanation and very clear.
amit rai (2 months ago)
thank you :)
Scott Fichter (2 months ago)
Followed the code to the T in Genesis theme and flex-basis refuses to work. I'm not sure why. My gut tells me it's parent div CSS causing the problem. Is it detrimental in any way to use a width percentage instead? Damn, justify-content: space-between; also fails. What the heck?
Shreenath Tewari (2 months ago)
margin: auto made me cry. Vertically aligning center was a pain in the a**
Vishal Bhamare (2 months ago)
Thanks man... Really helpful !!!
Shah Nawaz (2 months ago)
Very comprehensive tutorial on Flexbox.
Jonas Souza (2 months ago)
Honestly flexbox is life. I just can't imagine how i could work without it for so much time
Mamoun Adil (2 months ago)
Thanks Sir
Thank so much for this tutorial, its really good!
John Doe (2 months ago)
Fantastic Instructor.
Hong Wei Chen (2 months ago)
Flexbox is the true love I've been finding for a long time now.
Aman Sharma (2 months ago)
buddy you saved my life :)
judo nomi (2 months ago)
You know when you're looking for juuuuust the right video to help you out of a pinch, and you find the perfect one? That just happened when I found this. Thanks!
Lions Meow (2 months ago)
subscribed~ Great video helps me a lot thanks!!
Still Ready (2 months ago)
Best video/tutorial I found so far on the internet after searching for so long. Thank you!
jason speziale (2 months ago)
Theres only one problem with this video theres no image examples color boxes are easy to work with but images dont work the same cause Im having problems need help.
Abhash Singh (2 months ago)
Flex tutorial is superb. Please also provide the css grid video.
JOKONTOL (2 months ago)
Dank.. am I to late for this ? 😭
Joachim Strøm (2 months ago)
I know this is an older video by now, but the first example should have included the .container css - it was kind of crucial to get it to work :) but of course the code was provided in the description (Y)
Dhwndowlat Narzary (3 months ago)
great work. learnt a lot.
Shojib Hpk (3 months ago)
i love this video:) i need more video but free:(
Nitin Verma (3 months ago)
please make more css videos :(
Anoop Chauhan (3 months ago)
Hi thanks for this video and please reply me which pointer or extension do you used which shows width and height.
Daniel Gibson (3 months ago)
Very! rarely comment but just wanted to say this was a great video!!! Thanks
nb koteswara rao (2 months ago)
Vhin Gabuat (3 months ago)
i love you
Kappa Luppa (3 months ago)
Chriss123 (3 months ago)
Where has this been all my life. Best flexbox tutorial out there. Thank you!!
John B (3 months ago)
Excellent tutorial. Brad is clear, concise, informative and maintains viewer interest. Will definitely check out any udemy courses created by him.
Ahmed Khan (3 months ago)
awesome explanation and to the point ...you are a great teacher ....i'm subscribing your channel
Pribbip (3 months ago)
That was exactly what I needed. Thanks dude!
Raniel Rillon (3 months ago)
Awesome.... great tutorial.. GOD BLESS you sir..
Jack Bennett (3 months ago)
Awesome video man! Will definitely be referring to this video a lot.
NeoSabiit Tehzeeb (3 months ago)
Sir,i have completed my first code project by watching your javascript in half an hour tutorial. now its flexboxxx time.....Thanks to u ...Love from Bangladesh Sir.
Shivam saini (3 months ago)
Example 1 : @0:30 Example 2 : @2:55 Example 3 : @9:10 Example 4 : @18:11 Example 5 : @20:35 Example 6 : @23:11
Adrian Campos Teixeira (3 months ago)
rishab kumar (3 months ago)
Great Video, I got a basic understanding of how to use flexbox. Thanks Mate
A Bite Of Sojourn (3 months ago)
Indeed the best tutorial on flexbox 😍
Dana Elza (3 months ago)
Haven’t been doing websites for a couple of years. This video and others you have produced are helping me get back into the flow. You are a great teacher.
Tanay Sarkar (3 months ago)
You are awesome. Could you please add an advance svg animation tutorial?
Christopher A. (3 months ago)
Great video
Name of the song for the sections intro please :)
Genís Guillem Mimó (3 months ago)
I think the following guide complements this video realy well: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Tom (3 months ago)
Нормально обьяснил
Raman Singh (4 months ago)
Very informative and useful tutorial
ahson raza (4 months ago)
Hi, I need help if anyone can help . I am having flex-wrap property not working on mobile screens but it works fine when i shrink my browser width. Toggling device toolbar doesn't allows wrap property to work. I need this for my upcoming project and its important. Please help me (see attached screenshots url i have uploaded) https://ibb.co/e1nBbo https://ibb.co/mSYjwo and here is my code : =============CSS============= body{ margin:0; } .flex-container{ display: flex; flex-wrap: wrap; } .item1{ background-color: red; flex-grow: 1; min-height:100px; flex-basis:200px; } .item2{ background-color: yellow; flex-grow: 1; min-height:100px; flex-basis:200px; } .item3{ background-color: green; flex-grow: 1; min-height:100px; flex-basis:200px; } =============================HTML==================================== <div class="flex-container"> <div class="item1">First Box</div> <div class="item2">Second Box</div> <div class="item3">Third Box</div> </div>
Coding With Paul (4 months ago)
Great video. Learned a lot. Thank you.
srinivas archakam (4 months ago)
Hi, Can you explain how to implement flex box for forms like sign up or user details please?
WebWizard N_H_B (4 months ago)
Great Tutorial :)
Roberto Innocenzi (4 months ago)
No words, simply the best explanation ever listened to so far
Jacob Clarke (4 months ago)
Really helpful! Thanks so much!

Would you like to comment?

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