Learn CSS Flexbox in 2 Hours – Tutorial for Beginners

CSS Flexbox will help you create flexible and efficient one-dimensional layouts for your HTML websites. Learn all about CSS Flexbox in this comprehensive video course from @codewithindra7. Flexbox transforms an ordinary container into a flexible box where you can precisely control its children, known as flex items. ❤️ Try interactive CSS courses we love, right in your browser: https://scrimba.com/freeCodeCamp-CSS (Made possible by a grant from our friends at Scrimba) 00:00 Introduction to CSS Flexbox 00:07 What is CSS Flexbox (Detailed Definition) 01:48 Benefits of Using CSS Flexbox 02:28 Align and Center Elements Easily 02:36 Develop Responsive Layouts (Fewer Media Queries) 02:41 Reorder Elements without Changing HTML 02:46 Create Same-Height Columns 03:34 Real-World Examples of Flexbox Use 03:55 GitHub Navigation Bar Example 04:46 Anatomy of a Flex Container and Flex Items 05:41 DataDog Website Layout Example 06:57 Recommended Resources for CSS Flexbox 07:07 FreeCodeCamp CSS Flexbox Handbook 07:41 Mozilla Developer Network (MDN) 08:11 Local Development Environment Setup 08:17 Code Editor VS Code 08:41 Browser Google Chrome 08:58 Initial Project Setup in VS Code 09:42 Creating index.html and styles.css 10:48 VS Code Live Server Extension 13:29 Flexbox Terminology Container and Items 13:47 Setting display flex or display inline-flex 14:38 Setting up Starter HTML/CSS for Examples 17:01 Adding Unique Colors to Flex Items 19:38 Applying display flex 21:50 Main Axis and Cross Axis Explained 25:26 display flex vs display inline-flex 27:31 flex-direction Property 29:21 flex-direction row (Default) 29:45 flex-direction row-reverse 30:54 flex-direction column 31:40 flex-direction column-reverse 34:01 flex-wrap Property 35:42 flex-wrap nowrap (Default) 36:19 flex-wrap wrap 40:40 flex-wrap wrap-reverse 43:24 flex-flow Shorthand Property 48:57 justify-content Property (Main Axis Alignment) 49:50 justify-content flex-start (Default) 50:15 justify-content flex-end 51:40 justify-content space-between 52:26 justify-content space-around 53:08 justify-content space-evenly 56:56 justify-content center 01:01:46 align-items Property (Cross Axis Alignment) 01:03:15 align-items stretch (Default) 01:03:54 align-items flex-start 01:04:14 align-items flex-end 01:05:27 align-items center 01:05:46 Centering an Element Horizontally and Vertically 01:08:26 align-content Property (Multi-line Cross Axis Alignment) 01:10:15 align-content flex-start 01:10:33 align-content flex-end 01:10:47 align-content center 01:11:05 align-content space-between 01:11:26 align-content space-around 01:11:38 align-content space-evenly 01:13:50 place-content Shorthand (Align + Justify Content) 01:18:24 align-self Property (Individual Item Cross Axis Alignment) 01:24:42 order Property (Reordering Flex Items) 01:32:26 flex-grow Property 01:37:06 flex-shrink Property 01:42:08 flex-basis Property (Initial Main Size) 01:47:07 flex Shorthand Property (Grow, Shrink, Basis) 01:53:59 flex initial (Cannot Grow, Can Shrink) 01:56:17 flex auto (Can Grow & Shrink) 01:57:14 flex none (Inflexible, Neither Grows Nor Shrinks) 01:58:36 gap Property (Row Gap and Column Gap) 02:04:00 PRACTICE PROJECT 1 Center Element H/V 02:07:32 PRACTICE PROJECT 2 Building a Simple Navigation Bar 02:14:44 Conclusion 🎉 Thanks to our Champion and Sponsor supporters: 👾 Drake Milly 👾 Ulises Moralez 👾 Goddard Tan 👾 David MG 👾 Matthew Springman 👾 Claudio 👾 Oscar R. 👾 jedi-or-sith 👾 Nattira Maneerat 👾 Justin Hual -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news