Written article version of this video: https://www.moonlearning.io/articles'>https://www.moonlearning.io/articles
Full Modern CSS for UI Designer course: https://www.moonlearning.io/modernCS...
Get Figma for FREE: https://psxid.figma.com/ggcj1d
Full Figma beginners course: https://www.moonlearning.io/FigmaBeg...
Access all of my UX, UI & Figma courses: https://www.moonlearning.io


Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
Follow me on LinkedIn:   / christine.  .
Follow me on Twitter:   / moonlearning  
Follow me on Instagram:   / moonlearnin.  .
And don't forget to subscribe right here on Youtube for more!



Learn how to use Flexbox, a powerful CSS layout tool, to arrange and align elements in a container and control the layout's response to changing sizes. In this episode, the host explains the basics of Flexbox and how it translates to Figma's auto layout feature. Discover how to set up individual flex properties for items and explore the nesting capabilities of Flexbox. While Flexbox is great for component layout, CSS grid offers more control for overall page layout. Find out how to use both in harmony for optimal design.

00:00:00 Introduction
00:00:46 Flexbox Anatomy of Parent and Child
00:01:05 Flexbox Container Properties Overview
00:01:40 Flexbox Container Properties in CSS
00:02:35 Space between for Navigations
00:02:46 Flexbox Container Properties in Figma Auto Layout
00:03:25 Flex Wrap Overview
00:03:27 Flex Wrap CSS
00:04:17 Onedimensional Layouts
00:04:29 Item Properties
00:04:58 Item Properties in CSS
00:06:35 Item Properties in Figma (Resize feature)
00:08:42 Nesting
00:10:52 Onedimensional vs. twodimensional layouts
00:12:05 Stay in touch