Learn CSS FLEXBOX in 20 Minutes

In this web development tutorial, we will cover everything you need to know about CSS Flexbox in only 20 minutes. You will learn what Flexbox is, how Flexbox works, and the basic properties you will need to style your Flexbox containers. Flexbox is an awesome layout mode built into CSS, and is very easy to understand. I will even show you how to build a real-world responsive image grid with CSS Flexbox.

Let me know in the comments below what other advanced CSS tutorials you would like to see.
_____________________________________

📚 Learn to CODE in just a FEW months here:
_____________________________________

🛠️ Tools I use:

_____________________________________

💖 Show support!
_____________________________________

Watch Next:
_____________________________________

Connect With Me:
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #CSS #Flexbox

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

📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)

[novanoskillz]

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.

[najimali]

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.

[lycan]

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

[danieldanger]

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

[samantha]

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

[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,

[hiteshchalise]

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

[mysdkpkok]

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

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

[insanerahul]

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

[bhanutirumala]

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.

[rahulroy]

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 ❤️

[AbdullahAlMamun-mcnq]

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

[nafizkarim]

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

[shilpaa]

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.

[thegentofculture]

Very helpful, I'm seriously glad I subscribed.

[jeffkaplan]

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

[psyche]

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

[alejandrov.]

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