Learn CSS Flexbox in 2 Hours – Tutorial for Beginners

freeCodeCamp.org · Beginner ·📰 AI News & Updates ·4mo ago
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 A…
Watch on YouTube ↗ (saves to browser)

Chapters (41)

Introduction to CSS Flexbox
0:07 What is CSS Flexbox (Detailed Definition)
1:48 Benefits of Using CSS Flexbox
2:28 Align and Center Elements Easily
2:36 Develop Responsive Layouts (Fewer Media Queries)
2:41 Reorder Elements without Changing HTML
2:46 Create Same-Height Columns
3:34 Real-World Examples of Flexbox Use
3:55 GitHub Navigation Bar Example
4:46 Anatomy of a Flex Container and Flex Items
5:41 DataDog Website Layout Example
6:57 Recommended Resources for CSS Flexbox
7:07 FreeCodeCamp CSS Flexbox Handbook
7:41 Mozilla Developer Network (MDN)
8:11 Local Development Environment Setup
8:17 Code Editor VS Code
8:41 Browser Google Chrome
8:58 Initial Project Setup in VS Code
9: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 justi

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 0 of 60

← Previous Next →
1 Deploy 12 apps to AWS, Azure, & Google Cloud
Deploy 12 apps to AWS, Azure, & Google Cloud
freeCodeCamp.org
 2 Reinforcement Learning Course: Intro to Advanced Actor Critic Methods
Reinforcement Learning Course: Intro to Advanced Actor Critic Methods
freeCodeCamp.org
 3 How does the internet work? (Full Course)
How does the internet work? (Full Course)
freeCodeCamp.org
 4 Code a Dictionary with React and Material UI - Tutorial
Code a Dictionary with React and Material UI - Tutorial
freeCodeCamp.org
 5 Graph Algorithms for Technical Interviews - Full Course
Graph Algorithms for Technical Interviews - Full Course
freeCodeCamp.org
 6 HTML Tutorial - Website Crash Course for Beginners
HTML Tutorial - Website Crash Course for Beginners
freeCodeCamp.org
 7 Google Cloud Digital Leader Certification Course - Pass the Exam!
Google Cloud Digital Leader Certification Course - Pass the Exam!
freeCodeCamp.org
 8 Advanced OpenGL - Crash Course
Advanced OpenGL - Crash Course
freeCodeCamp.org
 9 FastAPI Course for Beginners
FastAPI Course for Beginners
freeCodeCamp.org
 10 Google Sheets - Full Course
Google Sheets - Full Course
freeCodeCamp.org
 11 Python Django and Google APIs - Project Tutorial
Python Django and Google APIs - Project Tutorial
freeCodeCamp.org
 12 Java Native Interface (28-Hour Course)
Java Native Interface (28-Hour Course)
freeCodeCamp.org
 13 Learn How to Code - Programming for Beginners Tutorial with Python and C#
Learn How to Code - Programming for Beginners Tutorial with Python and C#
freeCodeCamp.org
 14 Android Programming Course - Kotlin, Jetpack Compose UI, Graph Data Structures & Algorithms
Android Programming Course - Kotlin, Jetpack Compose UI, Graph Data Structures & Algorithms
freeCodeCamp.org
 15 Code a Discord Chat Bot That Talks Like Your Favorite Character - Tutorial
Code a Discord Chat Bot That Talks Like Your Favorite Character - Tutorial
freeCodeCamp.org
 16 Machine Learning Course for Beginners
Machine Learning Course for Beginners
freeCodeCamp.org
 17 Selenium Course for Beginners - Web Scraping Bots, Browser Automation, Testing (Tutorial)
Selenium Course for Beginners - Web Scraping Bots, Browser Automation, Testing (Tutorial)
freeCodeCamp.org
 18 Figma Course - Web Design Tutorial for Beginners
Figma Course - Web Design Tutorial for Beginners
freeCodeCamp.org
 19 Vue.js Course for Beginners
Vue.js Course for Beginners
freeCodeCamp.org
 20 Data Structures and Algorithms in Python - Full Course for Beginners
Data Structures and Algorithms in Python - Full Course for Beginners
freeCodeCamp.org
 21 Solidity, Blockchain, and Smart Contract Course – Beginner to Expert Python Tutorial
Solidity, Blockchain, and Smart Contract Course – Beginner to Expert Python Tutorial
freeCodeCamp.org
 22 Linux Essentials for Ethical Hackers - Full InfoSec Course
Linux Essentials for Ethical Hackers - Full InfoSec Course
freeCodeCamp.org
 23 Gatsby Static Site Generator Tutorial
Gatsby Static Site Generator Tutorial
freeCodeCamp.org
 24 Django For Everybody - Full Python University Course
Django For Everybody - Full Python University Course
freeCodeCamp.org
 25 Python Automation Tutorial – How to Automate Tasks for Beginners [Full Course]
Python Automation Tutorial – How to Automate Tasks for Beginners [Full Course]
freeCodeCamp.org
 26 R Shiny for Data Science Tutorial – Build Interactive Data-Driven Web Apps
R Shiny for Data Science Tutorial – Build Interactive Data-Driven Web Apps
freeCodeCamp.org
 27 Natural Language Processing with spaCy & Python - Course for Beginners
Natural Language Processing with spaCy & Python - Course for Beginners
freeCodeCamp.org
 28 HTML & CSS Project Tutorial - Build a Recipes Website
HTML & CSS Project Tutorial - Build a Recipes Website
freeCodeCamp.org
 29 Git for Professionals Tutorial - Tools & Concepts for Mastering Version Control with Git
Git for Professionals Tutorial - Tools & Concepts for Mastering Version Control with Git
freeCodeCamp.org
 30 TensorFlow for Computer Vision Course - Full Python Tutorial for Beginners
TensorFlow for Computer Vision Course - Full Python Tutorial for Beginners
freeCodeCamp.org
 31 HashiCorp Terraform Associate Certification Course - Pass the Exam!
HashiCorp Terraform Associate Certification Course - Pass the Exam!
freeCodeCamp.org
 32 AWS VPC Beginner to Pro - Virtual Private Cloud Tutorial
AWS VPC Beginner to Pro - Virtual Private Cloud Tutorial
freeCodeCamp.org
 33 Object Oriented Programming with Python - Full Course for Beginners
Object Oriented Programming with Python - Full Course for Beginners
freeCodeCamp.org
 34 Node.js / Express Course - Build 4 Projects
Node.js / Express Course - Build 4 Projects
freeCodeCamp.org
 35 Binary Tree Algorithms for Technical Interviews - Full Course
Binary Tree Algorithms for Technical Interviews - Full Course
freeCodeCamp.org
 36 TensorFlow Lite for Edge Devices - Tutorial
TensorFlow Lite for Edge Devices - Tutorial
freeCodeCamp.org
 37 Angular Tutorial for Beginners - Web Framework with Typescript Course
Angular Tutorial for Beginners - Web Framework with Typescript Course
freeCodeCamp.org
 38 Unreal Engine & C++ Tutorial - Endless Runner Game 🏃🏽‍♀️
Unreal Engine & C++ Tutorial - Endless Runner Game 🏃🏽‍♀️
freeCodeCamp.org
 39 Android App Development Tutorial for Beginners - Your First App
Android App Development Tutorial for Beginners - Your First App
freeCodeCamp.org
 40 Django Tutorial - Create a Digital Resume with a Python Backend
Django Tutorial - Create a Digital Resume with a Python Backend
freeCodeCamp.org
 41 Learn React by Building an eCommerce Site - Tutorial
Learn React by Building an eCommerce Site - Tutorial
freeCodeCamp.org
 42 JavaScript Tutorial - PuzzleCam Game
JavaScript Tutorial - PuzzleCam Game
freeCodeCamp.org
 43 Python API Development - Comprehensive Course for Beginners
Python API Development - Comprehensive Course for Beginners
freeCodeCamp.org
 44 The 50 Most Popular Linux & Terminal Commands - Full Course for Beginners
The 50 Most Popular Linux & Terminal Commands - Full Course for Beginners
freeCodeCamp.org
 45 Web Applications for Everybody Course - Dr. Chuck Teaches HTML, PHP, SQL, CSS, JavaScript, and more!
Web Applications for Everybody Course - Dr. Chuck Teaches HTML, PHP, SQL, CSS, JavaScript, and more!
freeCodeCamp.org
 46 Code a Squid Game JavaScript Game Using Three.js - Tutorial for Beginners
Code a Squid Game JavaScript Game Using Three.js - Tutorial for Beginners
freeCodeCamp.org
 47 Micro-Frontends Course - Beginner to Expert
Micro-Frontends Course - Beginner to Expert
freeCodeCamp.org
 48 Unreal Engine & C++ Tutorial - 1st Person Shooter Game
Unreal Engine & C++ Tutorial - 1st Person Shooter Game
freeCodeCamp.org
 49 C++ Programming Tutorial - Build a 3-Band Compressor Audio Plugin (w/ JUCE Framework)
C++ Programming Tutorial - Build a 3-Band Compressor Audio Plugin (w/ JUCE Framework)
freeCodeCamp.org
 50 Infrastructure as Code - Crash Course
Infrastructure as Code - Crash Course
freeCodeCamp.org
 51 AWS Certified Cloud Practitioner Certification Course (CLF-C01) - Pass the Exam!
AWS Certified Cloud Practitioner Certification Course (CLF-C01) - Pass the Exam!
freeCodeCamp.org
 52 Advanced Git Tutorial - Interactive Rebase, Cherry-Picking, Reflog, Submodules and more
Advanced Git Tutorial - Interactive Rebase, Cherry-Picking, Reflog, Submodules and more
freeCodeCamp.org
 53 Learn ASP.NET Core MVC (.NET 6) - Full Course
Learn ASP.NET Core MVC (.NET 6) - Full Course
freeCodeCamp.org
 54 Feature Toggles - Why and How to Add to Your Software
Feature Toggles - Why and How to Add to Your Software
freeCodeCamp.org
 55 Data Analysis with Python for Excel Users - Full Course
Data Analysis with Python for Excel Users - Full Course
freeCodeCamp.org
 56 NoSQL Database Tutorial – Full Course for Beginners
NoSQL Database Tutorial – Full Course for Beginners
freeCodeCamp.org
 57 Rust Programming Course for Beginners - Tutorial
Rust Programming Course for Beginners - Tutorial
freeCodeCamp.org
 58 Razor Pages for ASP.NET Core - Full Course (.NET 6)
Razor Pages for ASP.NET Core - Full Course (.NET 6)
freeCodeCamp.org
 59 The Business of Building Apps - App Product Management Course for Developers
The Business of Building Apps - App Product Management Course for Developers
freeCodeCamp.org
 60 Bootstrap CSS Framework - Full Course for Beginners
Bootstrap CSS Framework - Full Course for Beginners
freeCodeCamp.org
India’s Orange Economy Explained
Next Up
India’s Orange Economy Explained
Full Disclosure