CSS Flexbox 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 Receive SMS online on sms24.me
TubeReader video aggregator is a website that collects and organizes online videos from the YouTube source. Video aggregation is done for different purposes, and TubeReader take different approaches to achieve their purpose.
Our try to collect videos of high quality or interest for visitors to view; the collection may be made by editors or may be based on community votes.
Another method is to base the collection on those videos most viewed, either at the aggregator site or at various popular video hosting sites.
TubeReader site exists to allow users to collect their own sets of videos, for personal use as well as for browsing and viewing by others; TubeReader can develop online communities around video sharing.
Our site allow users to create a personalized video playlist, for personal use as well as for browsing and viewing by others.
@YouTubeReaderBot allows you to subscribe to Youtube channels.
By using @YouTubeReaderBot Bot you agree with YouTube Terms of Service.
Use the @YouTubeReaderBot telegram bot to be the first to be notified when new videos are released on your favorite channels.
Look for new videos or channels and share them with your friends.
You can start using our bot from this video, subscribe now to CSS Flexbox Tutorial for Beginners
What is YouTube?
YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others. Originally created in 2005, YouTube is now one of the most popular sites on the Web, with visitors watching around 6 billion hours of video every month.
