Learn CSS FLEXBOX in 20 Minutes

[@codeSTACKr]

Thanks for all of the support!! Continuing the Web Development 2019 Series. Here's the Beginners Guide to CSS Flexbox. Next up CSS Grid in 20 Minutes: kzbin.info/www/bejne/Zl6nimuAlNiekJI 📚 My Favorite Web Design Books 📚 Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link) amzn.to/2JaiCL8

[@mounirmejri8916]

.........................

[@mounirmejri8916]

......

[@mounirmejri8916]

O o

[@mounirmejri8916]

O.....o o. 9......o.. o.9.

[@najimali32]

Time Stamp Flexbox 0:24 What is flexbox 2:18 display:flex 3:00 Main axis 3:55 Justify content:flex-end: 4:08 Justify content:center 4:18 Justify content:space-between 4:35 Justify content:space-around 4:46 Justify content:space-evenly 5:04 Cross-Axis 5:07 aligh-item:stretch 5:23 aligh-item:flex-start 5:38 aligh-item:flex-end 5:48 aligh-item:center 6:40 flex-wrap:nowrap 6:53 flex-wrap:wrap 7:08 align-content: center -> it aligns the entire group within in the container 7:40 align-content:flex-start 7:50 align-content:flex-end 8:16 align-content:space-around -> equally distribute the space on top & bottom 9:10 flex-direction:row 9:35 flex-direction:column 10:42 flex-flow:column wrap -> Combination of flex-direction & flex-wrap 11:40 flex-grow:1 12:58 flex-shrink:1 14:00 flex-basis:25% 14:39 flex: grow shrink basis 15:40 align-self:center 16:08 align-self:flex-end 16:15 align-self:flex-start 17:55 order:number Like this so that it remains on the top of comments & Thanks for the video.

[@najimali32]

@Seliște Valeria time stamp is not for others,It is for me. I used to came here to check a specific property when I get stuck.

[@novanoskillz4151]

this video alone was more valuable than most paid courses. Literally i just finished a 35 hour paid course, and had to come to youtube because flexbox was just skimmed over. You should get into the paid course game, and make much smaller and specific videos where you dive deep - you have a knack for simplicity and layman explanation. thanks.

[@codeSTACKr]

Thank you! I'm actually working on my first course now :)

[@worldclasscode1847]

Great video :)

[@danieldanger5539]

I have a bad habit of not liking or subscribing to most any channel/video even channels I consume daily (let alone leave comments), however, when I stumbled upon one of your videos I ended up watching 10 or 11. Your videos are awesome. like how well lade out they are and the get to the point fast. you definitely have a talent for this. Well done ser

[@codeSTACKr]

I really appreciate that!

[@lycan2494]

this is content.. i thought i knew flexbox but this really opened up my eyes

[@codeSTACKr]

Thanks for watching!

[@umershabir_]

trust me i have purchased paid course to learn css but this man blaze me the simplicity way of delivery content i mean seriously have no words how can i thanks you! a virtual hug for you, you made things enough simple to understand,

[@codeSTACKr]

I appreciate that!

[@samantha6670]

You made your videos simple and clear, in addition you're voice is calm. It's effective.

[@codeSTACKr]

I appreciate that!

[@rahulroy5206]

Have been suffering from flexbox for nearly 2 yrs, now it's feels absolutely covered🔥, writing this comment only to thank u bro, really mean it from depth of my ❤️

[@codeSTACKr]

Thank you! Glad to help 😀

[@worldclasscode1847]

Great comment! :)

[@hiteshchalise3988]

7 mins in and I had to comment, holy shit this video is good. edit: watched it all, I am recommending this to all friends who are starting out on web dev, as well as anyone who wants to understand fundamentals of flexbox. Thank you so much, keep up the good work :)

[@codeSTACKr]

Thank you! Glad it was helpful.

[@RedEyedJedi]

OMG, your Flexbox tutorial is just as good as your grid tutorial. How you don't have over a million subs I'll never know. Keep at it mate, this channel is going to be huge. Share, share, share people.

[@codeSTACKr]

Thank you! I really appreciate it!

[@RedEyedJedi]

@@codeSTACKr I really appreciate you taking the time to make these videos mate. You are helping me loads towards my goal of being a front end developer. I'm nearly there now after studying HTML5 including canvas, CSS and JavaScript for a minimum of 12 hours a day, 7 days a week for a year. I was probably there a while ago because I already learned C++ and Java first but I'm quite fussy about learning as much as possible lol.

[@codeSTACKr]

@@RedEyedJedi awesome! Keep learning!

[@mysdkpkok]

I just want to say wwwooowwwww, what a really simple way to taught us the really important stuff, you are really a legend in teaching web skills, special thanks,

[@codeSTACKr]

Thank you!

[@insanerahul1511]

Amaing Video I was learning flexbox for so many days but no one could teach clearly like you did I love You!!! Man

[@thegentofculture]

Very helpful, I'm seriously glad I subscribed.

[@codeSTACKr]

Awesome, thank you!

[@bhanutirumala1083]

Yo! i've been watching your videos, since last couple of weeks(whenever i wanted to recollect the basics), Just wanted to mentioned the videos you making are very simple, well put together and much more informative then most of youtube channels. I really appreciate the work that your putting in andThanks for helping us with your great resource. I have a habit of subscribing to very fewer people that are doing awesome job in youtube community. You deserve my sub bro. You going to be a one of those great youtube channels sooner or later.

[@codeSTACKr]

Thank you! I really appreciate it!

[@worldclasscode1847]

Great video! :)

[@AbdullahAlMamun-mc4nq]

i never see this kind of video about flex box..your content is much higher.. thanks for uploading

[@codeSTACKr]

Wow, thanks

[@jeffkaplan9486]

Awesome video ... exactly what you need to know to FLEX !!!

[@codeSTACKr]

Glad it was helpful!

[@shilpaa8697]

this video helped me to clear my doubts relating to flex box and to understand the concept better.Thanks a lot and please continue to make such awesome videos.More power to you.

[@codeSTACKr]

Glad it helped!

[@psyche2404]

bro you’re the best !! I’m fkn GLAD i found yo channel

[@codeSTACKr]

Welcome aboard!

[@nafizkarim5191]

i though flexbox was shit, but this video opened my eyes, thanks man for making this whole thing easy to understand

[@kulea6208]

Thanks again. I was struggling to really understand flex box.

[@codeSTACKr]

Happy to help!

[@dfla5472]

Best flexbox basics video. don't think I need to watch any more flexbox videos after watching this Unless it's from this channel of course. Love this channel. Going to learn Js from the playlist.

[@codeSTACKr]

Appreciate that

[@SaiSarthik]

you are seriously underrated dude

[@codeSTACKr]

Thank you!

[@worldclasscode1847]

Great video :)

[@alejandrov.4382]

Im starting a React Native course, and flexbox is heavily used there, so this helps me alot, thanks!

[@codeSTACKr]

Thank you for your support!

[@gleidsonfederico]

You're the best, easy to understand. Thanks for the share.

[@codeSTACKr]

Thank you!

[@alibahrami633]

Very quick and helpful content. Thank you!

[@codeSTACKr]

You're welcome!

[@krims254]

Awesome video, do the img height automatically configure? So if I had an img height of 700px, the img would display 700px?

[@andrewsinelnikov2307]

Thank you so much. It's very useful tutorial

[@mr.terence1262]

Very clear and concise. You deserve more subs.

[@codeSTACKr]

I appreciate that!

[@techwanderer7127]

This was really informative. Good to brush up. Thank you.

[@codeSTACKr]

Thank you for your support!

[@bigburd05]

usual immensely useful tutorials from you! Any chance of sharing the custom.css you use in the video so I can see the clever axes and all, too while I'm playing with flexbox?

[@MarcCardwell]

i'm an old print designer, trying to learn this stuff. struggle with examples & how they become re-world designs. this helped and it worked on my test page. questions: 1. whats the app you code with? i'm using textMate on a mac, which has more features than i'm using, but the auto-complete in your app looks good; 2. i deleted the box-sizing rule, just to see what happened, and it got messed up, what's that doing that's so important? thank you for this video.

[@codeSTACKr]

I use Visual Studio Code. I have a few videos on how to set it up. It's free. Box-sizing set to border-box calculates the margin + padding + width together to achieve a true "width". By default width is not truly width, since the margin and padding will add to it. So basically, that setting just makes things easier to layout.

[@MarcCardwell]

@@codeSTACKr thanks, man! you have any links to compilation sites that have real usage of grid, flex grid, etc? and this is the best way, you feel? don't even worry about learning floats?

[@otracuenta3145]

Thanks for the video, it helps a lot to review the topic

[@codeSTACKr]

Thank you for your support!

[@estevanvargas1]

Hey dude...this was a great video. learned a lot can you tell me how you got those pics to be all different sizes... I was able to do this but my pics are all the same size. thanks again.

[@Dextergec413]

I'm totally new to all of this and I'm just wondering, why do you use instead of ?

[@matus7125]

Header is one from new elements, which have been added in HTML5. Its severel years ago, yes, but maybe, he is used to use it in "old school " style. Thats one reason.

[@datpham31415]

Really good question.

[@bonnesaffaires4641]

Thanks sir for this very helpful explains 👍👍

[@JoeGeorge319]

Code at the end (the presentation) seemed a little rushed, would've been nice to see that expounded on a bit. I've been trying to accomplish a set number of columns that don't have dead space between newlines based on height differences and this does just that. (namely, a set number of columns with unlimited height) thanks for the video

[@Hgrewssauujdkhvcjjipp]

Excellent👍, thanks for sharing it to us to learn. What is the link to download the file?

[@Veritas-Curat]

hello there! excellent video and i learned a TON.. do you happen to haev this code hosted somewhere? would like to save it as a point of reference. Thanks!

[@Drew7865]

Great content, thank you

[@nilmendes7710]

Helped me a lot! Thanks! ➕1️⃣👏

[@codeSTACKr]

Great!

[@srinathravichandran8796]

This is such an informative video..Thanks for creating this....could u share the code in GitHub as well ?

[@prachubadekar1069]

Clarity and Excellent level Overloaded...... Thanks ✌️💯🔥

[@rohankademani6406]

Nice video bro very helpful

[@codeSTACKr]

Glad it helped!

[@ibrahimkane2134]

question: how do we apply all that to a project?

[@abdurrahman_a]

Thank You

[@codeSTACKr]

You're welcome

[@leonh2140]

In the Webdevelopement for Beginners (Start Here) Playlist, I followed the videos from the beginning, but I must say in the CSS-videos after the CSS Units of Measurement-video, I'm completely lost. I don't know, you use so many things that you haven't explained in the CSS crashcourse video. Or am I missing other CSS videos in the chronology?

[@abdzigner8609]

You're awesome!

[@codeSTACKr]

You too!!

[@farhadcohan8867]

Thank you could you do before and after content ' '; how to change color of individual letters in word IE if my word is SUN but i want S to be red U to be blue N to be Green

[@DarkCebolix]

Nice!

[@codeSTACKr]

Thanks!

[@matthewrittenhouse1387]

how does one style a paragraph and image to be side by side with no wrapping on a card?

[@codeSTACKr]

The card would be the wrapper. Set it to display flex.

[@matthewrittenhouse1387]

@@codeSTACKr could you explain a little more than that?

[@codeSTACKr]

@@matthewrittenhouse1387 you said a card which I assume is a div with a paragraph and image within it. Just use display flex on the div of the card.

[@matthewrittenhouse1387]

@@codeSTACKr Figured it out. I was able to accomplish it by using 3 divs. 1 for the text, 1 for the image and then nested both within another div that I set to flex.

[@datpham31415]

Should I learn CSS Media Queries first or CSS Flexbox first?

[@mohamadfallahi8925]

thanks

[@codeSTACKr]

You're welcome!

[@jonathanjohnson6283]

19:25

[@anthonywilliam3893]

Show us more

[@kjacob]

lol i thought im the flexbox master till i saw this

[@iwillsubbacktoeveryone]

Hi! :D

[@florida813ma]

🔥🔥🔥🔥

[@Horoe]

youza life savurr