CSS for UI Designers: Understanding Flexbox and Applying it to Figma's Auto Layout

Показать описание

Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
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