CSS for UI Designers: Understanding Flexbox and Applying it to Figma's Auto Layout
Written article version of this video: https://www.moonlearning.io/articles
Full Modern CSS for UI Designer course: https://www.moonlearning.io/modern-CS...
Get Figma for FREE: https://psxid.figma.com/ggcj1d
Full Figma beginners course: https://www.moonlearning.io/Figma-Beg...
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 - One-dimensional 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 - One-dimensional vs. two-dimensional layouts
00:12:05 - Stay in touch
Watch video CSS for UI Designers: Understanding Flexbox and Applying it to Figma's Auto Layout online without registration, duration hours minute second in high quality. This video was added by user moonlearning 06 February 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,48 once and liked it 32 people.