Learn CSS Flexbox in 2 Hours - Tutorial for Beginners

Learn CSS Flexbox in 2 Hours - Tutorial for Beginners

freeCodeCamp.org via freeCodeCamp Direct link

10:48 VS Code Live Server Extension

20 of 71
Previous
Next

20 of 71

10:48 VS Code Live Server Extension

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Learn CSS Flexbox in 2 Hours - Tutorial for Beginners

Automatically move to the next video in the Classroom when playback concludes
  1. 1 00:00 Introduction to CSS Flexbox
  2. 2 00:07 What is CSS Flexbox Detailed Definition
  3. 3 01:48 Benefits of Using CSS Flexbox
  4. 4 02:28 Align and Center Elements Easily
  5. 5 02:36 Develop Responsive Layouts Fewer Media Queries
  6. 6 02:41 Reorder Elements without Changing HTML
  7. 7 02:46 Create Same-Height Columns
  8. 8 03:34 Real-World Examples of Flexbox Use
  9. 9 03:55 GitHub Navigation Bar Example
  10. 10 04:46 Anatomy of a Flex Container and Flex Items
  11. 11 05:41 DataDog Website Layout Example
  12. 12 06:57 Recommended Resources for CSS Flexbox
  13. 13 07:07 FreeCodeCamp CSS Flexbox Handbook
  14. 14 07:41 Mozilla Developer Network MDN
  15. 15 08:11 Local Development Environment Setup
  16. 16 08:17 Code Editor VS Code
  17. 17 08:41 Browser Google Chrome
  18. 18 08:58 Initial Project Setup in VS Code
  19. 19 09:42 Creating index.html and styles.css
  20. 20 10:48 VS Code Live Server Extension
  21. 21 13:29 Flexbox Terminology Container and Items
  22. 22 13:47 Setting display flex or display inline-flex
  23. 23 14:38 Setting up Starter HTML/CSS for Examples
  24. 24 17:01 Adding Unique Colors to Flex Items
  25. 25 19:38 Applying display flex
  26. 26 21:50 Main Axis and Cross Axis Explained
  27. 27 25:26 display flex vs display inline-flex
  28. 28 27:31 flex-direction Property
  29. 29 29:21 flex-direction row Default
  30. 30 29:45 flex-direction row-reverse
  31. 31 30:54 flex-direction column
  32. 32 31:40 flex-direction column-reverse
  33. 33 34:01 flex-wrap Property
  34. 34 35:42 flex-wrap nowrap Default
  35. 35 36:19 flex-wrap wrap
  36. 36 40:40 flex-wrap wrap-reverse
  37. 37 43:24 flex-flow Shorthand Property
  38. 38 48:57 justify-content Property Main Axis Alignment
  39. 39 49:50 justify-content flex-start Default
  40. 40 50:15 justify-content flex-end
  41. 41 51:40 justify-content space-between
  42. 42 52:26 justify-content space-around
  43. 43 53:08 justify-content space-evenly
  44. 44 56:56 justify-content center
  45. 45 01:01:46 align-items Property Cross Axis Alignment
  46. 46 01:03:15 align-items stretch Default
  47. 47 01:03:54 align-items flex-start
  48. 48 01:04:14 align-items flex-end
  49. 49 01:05:27 align-items center
  50. 50 01:05:46 Centering an Element Horizontally and Vertically
  51. 51 01:08:26 align-content Property Multi-line Cross Axis Alignment
  52. 52 01:10:15 align-content flex-start
  53. 53 01:10:33 align-content flex-end
  54. 54 01:10:47 align-content center
  55. 55 01:11:05 align-content space-between
  56. 56 01:11:26 align-content space-around
  57. 57 01:11:38 align-content space-evenly
  58. 58 01:13:50 place-content Shorthand Align + Justify Content
  59. 59 01:18:24 align-self Property Individual Item Cross Axis Alignment
  60. 60 01:24:42 order Property Reordering Flex Items
  61. 61 01:32:26 flex-grow Property
  62. 62 01:37:06 flex-shrink Property
  63. 63 01:42:08 flex-basis Property Initial Main Size
  64. 64 01:47:07 flex Shorthand Property Grow, Shrink, Basis
  65. 65 01:53:59 flex initial Cannot Grow, Can Shrink
  66. 66 01:56:17 flex auto Can Grow & Shrink
  67. 67 01:57:14 flex none Inflexible, Neither Grows Nor Shrinks
  68. 68 01:58:36 gap Property Row Gap and Column Gap
  69. 69 02:04:00 PRACTICE PROJECT 1 Center Element H/V
  70. 70 02:07:32 PRACTICE PROJECT 2 Building a Simple Navigation Bar
  71. 71 02:14:44 Conclusion

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.