Learn CSS Flexbox in 20 Minutes (Course)

Learn how to create responsive websites with this CSS Flexbox Beginner Course. Display: flex; explained in 20 minutes by Coding2GO

In this CSS Flexbox Crash Course for beginners you are going to learn about responsive web design by getting CSS Flexbox explained. How to use display: flex plays a major rule in making a website responsive, resize elements, wrap elements and align html elements anywhere inside a div. Of course you are also going to learn how to center a div.

Use our discount code: CODING2GO to get 10% off

Key Concepts:
CSS Flexbox Alignment: Use css flexbox (display: flex;) to align elements anywhere inside its parent container
Flexbox Main and Cross Axis: Learn how to use the justify-content property to control the align-ment along the main-axis (how to center an element horizontally)
Learn how to use the align-items property to align an element vertically (how to center an element vertically)
flex-wrap: Learn how to wrap elements to the next line when the screen size gets too small
css flex-grow: Make elements grow with Flexbox
css flex-shrink: learn how to shrink elements responsively to make it fit on mobile devices
align-items vs. align-content
difference between align-items and align-content
Learn Media Queries and Responsive Web Design in combination with flex-wrap

Topics of this video:
CSS, CSS Flexbox, css flexbox, display flex, html, css tutorial, responsive web design, flexible box layout, flexbox layout, responsive layout, justify-content, flex-direction, align-items, align-content, flex-wrap, flex-grow, flex-shrink, display: grid, place-content, how to center a div in css, flexbox center, how to center vertically, vertical center, horizontal center, make website responsive, learn responsive web design, for beginners, beginner tutorial, explained for beginners, beginner friendly, css flexbox course, css flexbox crash course, css flexbox for beginners, css flexbox tutorial

Credits

Track: "Take Off", NEFFEX

Track: "Little Things"

Track: "Scared Of The Glizzy"

[Stratnik]

He did it, he finally answered the biggest question in programming, “How to center a div”

[nivthefox]

I've been doing CSS since the late 90s, and it has changed so much from what I learned. At some point I moved to primarily working in the backend and I stopped keeping up. Then I came back to do some frontend stuff and there was all this new flex-box stuff and it was so damned confusing to me. I learned more in this short video than I could figure out with my own research and experimentation over the last several years. Well done, and thank you. I am definitely a subscriber, after this.

[saikattunga]

Your teaching is very helpful for begginer like me. Thank you so much...

[Chiwi_XD]

i just finished odin project foundation course and I'm still struggling to apply flexbox, i will watch this before i do the next project 👍

[stratfanstl]

The amount of thought devoted to writing this content, devising the demonstrations and synchronizing the narrative with the changes in the demo is awe inspiring. The topic itself is still difficult to learn cuz the designers of CSS didn't seem to step back and contemplate consistency in property names but given that hurdle, this is the best way to teach these techniques.

[PicSta]

For layouts, I prefer grid to flexbox. Grid has some advantages as it takes care of their child items (columns). Flexbox has it strength when aligning items in a row or column structure. UL lists or like in a header to give space between logo and navigation. If the number of items is unknown, and you define a structure with grid, it will take care of the child items. Anyway, good explained flexbox video. Thanks!

[makhnas]

Thanks so much bro love you, you solved my misconception btn align-items and justify-content.
Big up bro👊

[igtpdbw]

Best flex box course i havve seen so far thanks for the nice work :)

[garywintle]

Really enjoying your vids lately. Very helpful and enjoyable.

[eocrvfe]

Really clear and succinct explanation!

[AS-mcdb]

I am glad that you are uploading awesome contents now a days... Thank you ❤

[aq]

Thankyou so much ❤❤❤.So many doubts cleared

[Intikhabkhursheed]

great video and please i need a video on Modal in html css a pop up modal

[dsymhse]

Please add a video on grid, please 🙏🏻 😢

[waleedbinshabbir]

omg thank you so much, I have a project this month and this is what I was looking for.

Can you please do css grid and css containers next.

[sardarzain]

Believe me this is absolute 💎.
I don't know who are you but In my heart there is a very big bunch of love for you ❤❤

[ashishkumar-jocj]

Where is the order property sir its very important in terms of positioning the flex items specially in complex responsive design

[lirdrsl]

Thanks you alot nice work and I appreciate it, you make me understand about flex box,

[NoorKhan-qwtw]

Cool
The way of your teaching in awesome ❤❤❤

[sardarzain]

Sir plz make a comprehensive tutorial on CSS Grid also, you are so effective for us; plz sir