Create a mobile app layout with Flexbox! - Tutorial 20 of 20 💪

Create a flexible mobile app layout without widths, heights, fixed positioning or floats! All videos + exercises → Flexbox.io

[@ChristianGenco]

Oh man - this is the video that sold me on flexbox. I can't tell you the number of hours I've struggled to get a layout like this in pre-flexbox-css.

[@WesBos]

Christian Genco The best!

[@razin275]

I just binged this whole playlist in like 2.5 hours and LOVED it. Thanks a bunch!

[@WesBos]

Glad you enjoyed it!

[@camilomunoz1156]

Dude, I've just watched all your flexbox series, thank you so much for these tuts, it's just amazing!

[@WesBos]

Camilo Muñoz Donoso Thanks Camilo! Glad you enjoyed them!

[@arkadiuszkozub8917]

This series was awesome! Thanks! I've learned a lot from you and i'm really grateful for that. Also I want to say: you'r great teacher. You didn't just show some general rules, but you explained some of cases of use flexbox. It's something unique. I was watching a lot of tutorials about css and stuff, but you was first one to show real power of it.

[@kevthecoder]

Thanks for these videos! Just finished the entries series and think I have a better understanding of the power flexbox has to offer! I'll still play around with it more to become completely fluent in it! But this has been very informative and simple to understand!

[@AdamFiregate]

Hi Wes! Thanks for the series! Ive just finished the whole stuff. Really easy and inspiring.

[@WesBos]

+AdamFiregate Thanks a lot Adam! Glad you enjoyed it! Stay in touch!

[@floriantreder1834]

Super awesome tutorial! I really love that you repeat some important stuff over and over again. With "important stuff" i mean things like the difference between the flex-container and the flex-items or the Main-Axis / Cross-Axis Thing. Greetings from Germany!

[@WesBos]

+Ted TroEder Glad you aren't annoyed at that!

[@Greenheart492]

Thanks for a great course! I especially liked to see how simple it is to create this responsive layout with pure flexbox!

[@WesBos]

Glad you enjoyed it!

[@barrbudo]

Best playlist on KZbin! Thanks a lot, professor :)

[@WesBos]

+Barbudo You're welcome!

[@AlexGBY9]

Amazing! I've meant to watch this playlist for a long time, I read the CSS-Tricks "FlexBox" Article a long time ago, I've been using it for a while and even completed the FlexBox section from a famous Udemy course, but today I took a few hours to watch the whole playlist and it is amazing. I like how you explain stuff, the real-life examples, and the fact that you take the time to upload this great material for all of us. Thank you! Good content WesBos.

[@boundlesslife]

This series is amazing. Thank you so much!!

[@alemesa.youtube]

Thanks for this tutorial Wes, you're truly cool!!! Keep up the good work and looking forward to watch your other tutorials.

[@WesBos]

+Alejandro Mesa Suarez Glad to hear you enjoyed it!

[@talhaabbas1816]

thanks a lot this playlist helped me a lot you really are the best web development teacher in the world please make as much as you can please love you again 😍😍😍😍

[@owolabiyusuf8762]

Thank you sir, ,i really appreciate your effort you put for this simplified tutorial.

[@mmazeto]

No words to discribe this Flexbox series. Thanks a lot! See you Wes.

[@yinonelbaz5309]

Thanks a ton for these tutorials - they're great.

[@ЮрійСолтановський]

Very good course! It would be great to add some notice about margin:auto in flex layouts, especialy in navigation

[@bicunisa]

Thank you for the great video tutorials. Just finished the whole series and learned several things about flexbox along the way! One question though, how did you manage to change the font on the browser tab? :)

[@WesBos]

bicunisa You're welcome! I didn't change the font on the browser tab - its just the OSX default

[@bicunisa]

I'm not on OSX. The apparently changed font appears both on your site and on your KZbin channel! Was just curious on why your page tabs are the only ones that look differently.

[@melaniecascante6177]

great series! thank you for the material too, it was very helpful, you're a great teacher!

[@ohhhgggeeezzz]

Thank you for all these videos.... I am getting a little confuse when do use flex-direction: column and when to use flex-wrap. 4:35... Could you also set flex-wrap: wrap. And than in the flex-item set flex:1. ? Would this yield the same result? Thanks. Oh by the way you ROCK.... thank you so much.

[@arturdomanski7102]

In Firefox layout looks exactly like one on the video, but in Chrome header and .icon-bar have padding issue. Is there some simple trick to fix this issue?

[@toddjudd9552]

Amazing Flex box tutorial! you sir are a Boss, quite literally! Thanks so much for your work and the effort you put into this, It has really helped me under stand and use flex box in my own work!

[@WesBos]

+Todd Judd Thanks Todd! Glad you enjoyed them :)

[@svitlanamakhno1837]

Thank you, Wes Bos! The course is really cool! Looking forward to something cool on jQuery from you!!!

[@sivaganesh4489]

completed whole series. love from india

[@kamaboko1]

Wonderful tutorial. Very informative. Thanks.

[@usasikh1]

loved the videos:) will definitely recommend the series.

[@ffaggionip]

Hi, Wes! Thank you so much for your tutorial. You're an excellent teacher. Have a great 2016!

[@WesBos]

Thanks! You too!

[@finnyforever08]

Great stuff Wes Bos - you did great!

[@WesBos]

+A Frica Thanks!

[@miklosnemeth8566]

This is a 6 year old video still totally relevant today. Actually, this is still the only one, which demonstrates a solution. The solution is not perfect when the content section has only a small amount of data, in that case the footer section starts stretching upwards.

[@doge4ever458]

Amazing vids Wes, but I've learned that everytime I write display: flex that whistle is on my mind playing all over again. :P

[@WesBos]

+tomisback tom It will never leave!

[@kysonic]

Wes! Thanks a lot for your tutorials. It really helped me to understand flexbox concepts. And maybe you know... How to make it work in IE9?

[@WesBos]

+Антон Мирошниченко You can't - IE9 is almost gone, but if you still need to support it, you can't use FlexBox.

[@kysonic]

***** Got it. Thanks. I've heard about some JS libraries (like flexiejs.com/) can provide features of FlexBox in old browsers, but i'm not sure that it will work fine.

[@WesBos]

I've seen that too - Flexbox is hard to polyfill and I can't imagine it would work very well at all. Plus it hasn't been updated in 2.5 years.

[@ivanvolti]

Wes, thank you for such a great tutorial! There's a problem with the header `space-between` approach though. The title is not at the center. And if a left or right button would be bigger the title would look a bit ugly. You can check it here (the red line helps to see the center): codepen.io/anon/pen/aOPZmM?editors=110 I fixed it below with `flex-basis`: codepen.io/anon/pen/rVoeEK?editors=110

[@mnsc]

Nice! I thought about the same thing but would never have come up with flexbasis 0%. Why does it work? Is it a hack?

[@happycandyt]

because it lets the layout think that the buttons' width is 0, so the space in between will be equal (i might be right or wrong, just a guess)

[@ВладимирРыжак-б1ц]

Thank you very much, very clean explanation

[@WesBos]

+Владимир Рыжак :D

[@oooooooooooooo-j9r]

Thank's wesbos for this flexbox series.

[@YudiMuchanis]

Thank you Wes! It would be great if you can share the exercise file :D

[@WesBos]

+Yudi Muchanis Get them at Flexbox.io

[@YudiMuchanis]

+Wes Bos ah i forgot to check the email... thank you so much

[@dshakya]

Great playlist. Its just not what you present but how you present. Learnt a lot. Thanks! (By the end, the intro music was getting so annoying.. ;-) )

[@dmytrop528]

Thanks a lot for your lessons, man!!

[@shahbokhari]

Superb! Wes Boss is Cool!

[@WesBos]

S A Bokhari Thanks :D

[@staybalancedn]

Hey Wes, this did not seem as hard as the first nested layout you did. Nice work...

[@fahadkhanchughtai3279]

Thank You Wes, For making and sharing these videos. They are helping me a lot and I hope when I earn some money, I will pray for you :p Thanks Again! Very Nice learning dear!

[@abolfazlnasseri2717]

thank you for this incredible tutorial

[@badaaki]

Could you use flex-wrap: wrap instead of flex-direction: column?

[@romanshestakov]

Wes is real good!

[@WesBos]

Роман Шестаков Thank you!

[@isunas16]

This is awesome man

[@WesBos]

+Isu Nas You are awesome!

[@ftnsco]

Amazing! Thanks Wes!

[@SamwiseandSeantay]

Wes is cool. Thanks Wes

[@rexfng]

Good job buddy! Very helpful :)

[@WesBos]

+Rex Fong Thanks Rex!

[@vitorestevam6392]

amazing vid!

[@chandankumararts]

Superb! I learn it.. Thank you wes! Cheers :) :)

[@WesBos]

+chandan kumar Glad you made it all the way through to the end! Great work :)

[@johnulmer774]

What version of font awesome is this?

[@Julian-kh6wr]

All lesson-data are on github.com/wesbos/What-The-Flexbox . Please know that the credits go to Wes Bos, because the data are from him.

[@maremeaxi3344]

EPIC CONTENT !!!!

[@ialimijororakotoniaina3274]

awesome , thanks

[@WesBos]

+Rakotoniaina Mijoro Anytime!

[@impamcy]

This series is totally awesome!!! But I got a problem, the header and icon bar does not stretch and take as much room as their need, I even just copy and paste Wes's style-ANSWER.css file to run on the browser, the problem still exists. jsbin.com/vovigun/edit?html,css,output

[@ICUSmooth]

I'm having the same problem!

[@ICUSmooth]

I found the solution in the github issues: github.com/wesbos/What-The-Flexbox/issues/2 just add this .icon-bar { display: flex; justify-content: center; flex-shrink: 0; }

[@valeriikuzivanov6832]

Thanks, Boss! :-D

[@WesBos]

+Valerii Kuzivanov Thank you!

[@brycematheson712]

Jeez. By the last tutorial, that freaking whistle at the beginning of every video is really starting to piss me off. Great tutorials, though. Great content, and very well explained.

[@WesBos]

+Bryce Matheson 😘

[@chendujia]

Took me 2 days to understand and finish all of this. From The Odin Project with 🍕

[@irthorbits]

jolly good

[@WesBos]

+irth orbits 😘

[@irthorbits]

Cheers Bos! ;)