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

Опубликовано: 06 Февраль 2024
на канале: moonlearning
8,482
327

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


Смотрите видео CSS for UI Designers: Understanding Flexbox and Applying it to Figma's Auto Layout онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь moonlearning 06 Февраль 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 8,48 раз и оно понравилось 32 людям.