Learn Flex-box layout in 15 minutes | CSS Flex Basics tutorial

Understanding Flex basics in CSS3 from scratch | A quick guide to Display Flex with styling container and items with flex-direction, flex-wrap, flex-basis, flex-shrink and flex-grow.
#flex-box #cssflex #flexLayout
Help the channel via patron and buying merchandise
* / techsith
* teespring.com/stores/techsith...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* czcams.com/users/timedtext_vide...
Note: use translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

[@realchrishawkes]

Flexbox is the best thing to happen to CSS in as long as I can remember. It's so much easier to reason about than floats and clears.

[@alinawaz4034]

OMG Chris is here 😲

[@navjotsingh2251]

Ali Nawaz who is this dude?

[@bollvigblack]

how many years ago exactly ?

[@Horoe]

I've seen you before, you are that Chris guy who talks wicked things about react.

[@connorgaughan9117]

float is just like a magic trick for me right now lol

[@blurocktech]

Hey man, I know your channel is still growing. I just wanted to tell you your tutorials are clear, no-nonsense, and helpful. Thanks for putting in an example for each property you're discussing. Keep up the great work, subbing!

[@joshuadouglas-smith2388]

This man is a KING, no-nonsense straight to the point and easy to follow, You are the only person out of the 15 clips I've watched and frustrating switched off that bothers to mention Flex Basis... very nicely done!

[@quintonshuman3144]

So glad you mentioned the song by Dave Mathews Band. The song plays in my head every time I use space-between. Thank you.

[@golubovicm]

Nice and clean. Easy to follow. Thanks for the tutorial!

[@asifpathan9141]

I was really going mad because of too many videos are there on CZcams about FlexBox but literally none of them were helpful related to flexbox but finally found your video and now I can use it in a good way. And the most important thing that CZcamsrs ask you to Like and Subscribe before they do anything and believe me that doesn't sound good.. But Thanks to you for this video.

[@Techsithtube]

Glad I could help Asif. Thanks for watching!

[@larissacooper3317]

I think this is the best explanation of flexbox that I have seen. Thank you!

[@buncha1499]

Great as always Techsith! And love Dave Matthews Band! Saw em live at the Gorge, one of the best live shows i've ever been too :)

[@andrear4067]

Great tutorial with easy to understand demonstrations!

[@cblack2863]

Great explanation of how flex works. Very easy to listen to which helps learn process a great deal

[@srinumajji501]

Thanks for this awesome tutorials TECHSITH

[@mr.webdev3700]

That was a great explanation! Good Job! 👍👍👍👍👍👍👍👍👍

[@mr.webdev3700]

@Pakistani Gamer I did a video on each of them about 3 weeks ago! Be sure to check them out!

[@MrRschaithu]

This is clearly one best explanation of flex model I have seen. So simple and crisp.
I have gone through other videos of yours. Definitely one of the best videos to learn JavaScript.
Would definitely recommend your channel to friends.

[@Techsithtube]

Rs, Appreciate the comments. Thanks for watching!

[@MrRschaithu]

techsith infact today I have attended an interview. And the only css question they have asked me is about flex model. And exactly what you explained above. And you can imagine what happened. I got through.
Also the interviewer was surprised when I told him about the array.flat function which he was not aware and I was supposed to write a function for the same.
Some call it coincidence. This is baap of coincidence.

[@sagunatailor7342]

I love your tutorials they are so concise and clear thank you!

[@adilzamal3218]

That was an amazing lecture

[@erice1717]

I'm in the middle of making the biggest React app I've made yet and this was super helpful for me. I was finally able to build a UI I like.
Thank you!

[@sandip_bettereveryday]

I have really learned! Thank you.

[@christopherfowler8452]

great tutorial. Adding these borders prior to doing the examples makes it so much easier to visualize and understand.

[@Techsithtube]

Glad it was helpful!

[@nidzeksmocni659]

This is gold! Thank you so much!

[@fazlerobi]

I like the way you talk and explain things, very clean cut simple.

[@bhavinshah4257]

You are choosing heating topics. Great! Thank you so much for great explanation!!!

[@Techsithtube]

Thanks for watching Bhavin

[@Doshinkyo]

Thank you so much for sharing this. It helped me out.

[@DavidElstob73]

Great video. Nicely explained. Thanks.

[@susantau]

Thank you! Crystal clear explanation.

[@adammohamed1406]

the best flexbox tutorial so far

[@srikarravoori124]

All properties have been covered . Nice tutorial.

[@Dawid-lb8fe]

Best explaination, thanks!

[@ritsk4338]

Thankyou for choosing this topic

[@crason8]

This is a fantastic video... i'm putting this video in our slack for others to learn from as well!

[@Techsithtube]

Please do! Appreciate it.

[@dreammagicarts6613]

At last, found a video of somebody properly explaining Flexbox instead of just doing their thing. Thanks a lot, few exercises would help though.

[@purbaphalgunimishra9114]

Love the way you explained... Thanks.. God Bless You.. Love...

[@0shawhat]

Thank you so much for this vid!! I'm taking a class where it teaches php programming and we had to make a website using this but I didn't know... When I'm done with that class I'ma def go back and change everything to flexbox :)

[@TheLollercaster]

wow, good to know it can be so powerful, thanks for the video :)

[@hypnobloom9917]

You explained this really well, thankyou.

[@birdbrainsolutions6112]

Thank you, I finally learnt css flexbox because of your video :)

[@bunburyLZD]

I FINALLY understand how the flexbox works..thank you so much 😭

[@KenshinXI]

Very clear instruction and easy to understand.

[@ravinomula4192]

Excellent Explanation sir.👍👍👍

[@DavidElstob73]

Great tutorial. Thanks.

[@MrPwang08]

Very helpful concise video on flex-box! Make one on grid that would be great!

[@mikgaming07]

This demonstration made my life easy..

[@chujingxl]

Thank you! Very helpful! ^-^

[@neetupurba7059]

Very helpful sir.. thanks a lot 😀😀

[@simraujla5748]

Big fan sir 🙌🙌🙌 u and mmtuts are best people to learn web developing from CZcams........I'll share this channel everywhere.....

[@Techsithtube]

Thanks for sharing the channel with everyone. :)

[@bollvigblack]

this is so gold ! thank you

[@Techsithtube]

Thanks for watching :)

[@Coding_Destini]

Really so good 💞... Clear understanding

[@octaviojuarez6367]

great job!

[@achillesarmendariz9335]

enjoyed this video a lot

[@mr_martellz]

This definitely helped a lot

[@unchileno]

Thanks for a great explanation on how to use fexbox.

[@Techsithtube]

Glad it was helpful!

[@sushantkunkekar2155]

It was the coolest way to learn Flex..very nice

[@Techsithtube]

Thanks for watching sushant:)

[@HenrryPires]

i learned something with this video. Thanks

[@Techsithtube]

Glad it was helpful!

[@kratinawlakhe2061]

Thank you, the tutorial helped in understanding flex.

[@Techsithtube]

Krati, glad it helped! Thanks for watching!

[@boryanailieva9996]

Awesome! And in time for me! Maybe something about css grid one day?

[@kingyacob]

Brilliant!

[@florianmaetschke9054]

Saved my day!

[@Techsithtube]

Thanks for watching!

[@SunitaYadav-qt5vj]

thanks a lot! such a nice video, very well explained!

[@Techsithtube]

Glad it was helpful!

[@srinumajji501]

Thank you so much

[@SergioArroyoSailing]

very nicely explained and illustrated sir! keep up the good work :)

[@Techsithtube]

Thank you, I will. Thanks for watching Sergio!

[@vijaybhorkhade4041]

Thanks for this css topic....

[@steveforrest1885]

great video very informative and concise

[@nanasarathi]

Very nicely explained 👍 Thanks 🙏

[@dassaniritesh]

Fantastic explanation pls keep up the good work

[@Techsithtube]

Thanks, will do!

[@nitonyambose3158]

Thank you very much this has been helpful ...

[@dianned3174]

I hit the like button before i watch the video coz i'm pretty sure i'm gonna learn a lot from this tutorial! 👍

[@Techsithtube]

Happy to hear that! :)

[@rogerlandaverde5365]

Thanks for the video very helpful

[@ohboypeach]

you made it super easy

[@mathewmccloskey8242]

Very nice video!

[@Techsithtube]

Thanks for the visit

[@GoatzAreEpic]

Bro ur the GOAT

[@rajeshweb7594]

That's really a easy explanation..Thanks a lot..

[@Techsithtube]

Happy to help

[@mohammadedrisafzali807]

Thank you man

[@Techsithtube]

Thanks for watching :)

[@ItsGoodToBeHater]

Thank you.

[@abolfazlalamdar2463]

Thx that's help me somuch

[@clone_nk]

waaaa. thank you brodie . i learned more

[@Techsithtube]

I am glad brodie, Keep on learning!

[@DesaiBharat702]

Very good example

[@iamkakarotsaiyan3918]

AWESOME..!!

[@buncha1499]

The outro song is dope!

[@tvhouse7479]

Its very good.many many thank you for this video.

[@Techsithtube]

You are most welcome. I am glad that you learnt something from it.

[@felicialuu7691]

BEST VIDEO!!!

[@saiudaybhaskarguddati1852]

thanks for helping me on this concept

[@Techsithtube]

It's my pleasure

[@albyscaria9433]

Very nice tutorial

[@MohammadAftabAlam1]

nicely explained

[@swapnilshinde4745]

Firstly thanks for the video, need the video on CSS GRID as well !!

[@Techsithtube]

Will upload soon

[@manikandan6274]

Awesome

[@sebastianlaka6247]

Thank you for thia video😀😀

[@bobbyandthomas]

Amazing..

[@mohammadhassanmohammadigar6215]

perfect

[@fahadhafeez8086]

Nice tutorial sir. Thank you for this nice explanation.

[@Techsithtube]

You are most welcome! Thanks for watching!

[@Sayayayaaa]

Your accent is so cool its like a mix of english, american and indian

[@brian_ham]

Thanks

[@patni1234561]

Great explanation as always. Do we need bootstrap or other CSS framework to achieve responsiveness after we know flex can do it all?

[@PicchiChannel]

Jesus !! after 100 of tuts I got this one easiest. GBU.

[@Suresh-gf1qd]

Very good explanation, Need CSS grid

[@tutkunturan5897]

thanks for border.

[@swapond]

Become a fan after watching your js tricky video

[@GoatzAreEpic]

Can you do video about ES6 filter, map and reduce thx

[@ConnorAZ]

Maybe you should start a series where you're going to create a website for TechSith from scratch that'll be good for us and you will be getting a new website !!! Btw I am Aamir if you remember me from Facebook Challenge Series

[@elg281]

Thanks Finally a coder with keyboard and mouse skills

[@Techsithtube]

Glad I could help! :)

[@arunanthony7534]

What if I want to make one elemenr stick to right corner and all other elements to the left column wise

[@whoisarod]

Because the code has wrap-reverse activated, the align-items are also reversed. Meaning flex-end is on top and flex-start is that the bottom.