CSS Flexbox Tutorial for Beginners

By freeCodeCamp.org
Published: Nov 24, 2025

“
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

[READ MORE]

”