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

Подписаться 148 тыс.

Просмотров 143 тыс.

50% 1

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.
* ru-vid.com_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.

Наука

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

24 мар 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@realchrishawkes 5 лет назад

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

OMG Chris is here 😲

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

Ali Nawaz who is this dude?

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

how many years ago exactly ?

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

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

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

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

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

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

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!

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

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

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

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

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

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

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

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 :)

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

I was really going mad because of too many videos are there on RU-vid 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 RU-vidrs 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 3 года назад

Glad I could help Asif. Thanks for watching!

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

Great tutorial with easy to understand demonstrations!

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

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

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

Thanks for this awesome tutorials TECHSITH

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

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

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

the best flexbox tutorial so far

@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.

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

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

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

All properties have been covered . Nice tutorial.

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

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

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

Thank you! Crystal clear explanation.

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

I have really learned! Thank you.

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

Great video. Nicely explained. Thanks.

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

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

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

This is gold! Thank you so much!

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

Very clear instruction and easy to understand.

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

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

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

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!

@bhavinshah4257 5 лет назад

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

@Techsithtube 5 лет назад

Thanks for watching Bhavin

@adilzamal3218 5 лет назад

That was an amazing lecture

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

This demonstration made my life easy..

@mr.webdev3700 5 лет назад

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

@mr.webdev3700 5 лет назад

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

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

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

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

You explained this really well, thankyou.

@Dawid-lb8fe 3 года назад

Best explaination, thanks!

@ritsk4338 5 лет назад

Thankyou for choosing this topic

@Coding_Destini Год назад

Really so good 💞... Clear understanding

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

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

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

Glad it was helpful!

@0shawhat 3 года назад

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 :)

@ravinomula4192 5 лет назад

Excellent Explanation sir.👍👍👍

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

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

@TheLollercaster 5 лет назад

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

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

Great tutorial. Thanks.

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

This definitely helped a lot

@MrRschaithu 5 лет назад

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 5 лет назад

Rs, Appreciate the comments. Thanks for watching!

@MrRschaithu 5 лет назад

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.

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

great job!

@neetupurba7059 5 лет назад

Very helpful sir.. thanks a lot 😀😀

@chujingxl 5 лет назад

Thank you! Very helpful! ^-^

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

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

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

Please do! Appreciate it.

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

enjoyed this video a lot

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

Very nicely explained 👍 Thanks 🙏

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

Thank you, the tutorial helped in understanding flex.

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

Krati, glad it helped! Thanks for watching!

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

great video very informative and concise

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

Thanks for the video very helpful

@boryanailieva9996 5 лет назад

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

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

Thank you very much this has been helpful ...

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

i learned something with this video. Thanks

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

Glad it was helpful!

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

this is so gold ! thank you

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

Thanks for watching :)

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

Thanks for a great explanation on how to use fexbox.

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

Glad it was helpful!

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

Fantastic explanation pls keep up the good work

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

Thanks, will do!

@SunitaYadav-qt5vj 3 года назад

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

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

Glad it was helpful!

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

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

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

Brilliant!

@sushantkunkekar2155 5 лет назад

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

@Techsithtube 5 лет назад

Thanks for watching sushant:)

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

you made it super easy

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

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

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

Thank you, I will. Thanks for watching Sergio!

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

Saved my day!

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

Thanks for watching!

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

Very good example

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

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

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

Happy to help

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

Very nice video!

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

Thanks for the visit

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

Very nice tutorial

@vijaybhorkhade4041 5 лет назад

Thanks for this css topic....

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

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

Happy to hear that! :)

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

The outro song is dope!

@MohammadAftabAlam1 Год назад

nicely explained

@simraujla5748 5 лет назад

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

@Techsithtube 5 лет назад

Thanks for sharing the channel with everyone. :)

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

waaaa. thank you brodie . i learned more

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

I am glad brodie, Keep on learning!

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

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

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

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

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

Thank you for thia video😀😀

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

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

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

Will upload soon

@srinumajji501 5 лет назад

Thank you so much

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

thanks for helping me on this concept

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

It's my pleasure

@GoatzAreEpic 5 лет назад

Bro ur the GOAT

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

Thank you man

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

Thanks for watching :)

@ItsGoodToBeHater Год назад

Thank you.

@felicialuu7691 Год назад

BEST VIDEO!!!

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

AWESOME..!!

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

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

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

Awesome

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

Thx that's help me somuch

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

Nice tutorial sir. Thank you for this nice explanation.

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

You are most welcome! Thanks for watching!

@patni1234561 5 лет назад

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

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

Thanks Finally a coder with keyboard and mouse skills

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

Glad I could help! :)

@ConnorAZ 5 лет назад

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

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

perfect

@Swapond. 3 года назад

Become a fan after watching your js tricky video

@bobbyandthomas 5 лет назад

Amazing..

@Suresh-gf1qd 4 года назад

Very good explanation, Need CSS grid

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

Thanks

@NeoCoding 5 лет назад

the best explanation! btw what prog do you use for screencasts that allow you 4k and what your display resolution then?

@Techsithtube 5 лет назад

I use camtesia . there is a export option for 4k.

@NeoCoding 5 лет назад

@@Techsithtube good. probably it depends on screen resolution also.

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

Hi ,i am a beginner in frontend,this video helped me a lot.I have a question, if i want to resize the flex box by height then which property will be usefull?

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

thanks for border.

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

Nice Video,,, Just a question, when i do align-items:flex-end; the content moves downwards. In your case it was moving upwards.. I think downwards behavior is correct. Can you explain?