Flex makes it easy to create advanced layouts including responsive navigation menus, card layouts, and more. In this video, get a crash course.
- [Instructor] Flex is an advanced layout module … and we have entire courses dedicated … to showing you how to use it in-depth. … Even so, I want to show you some … key features and browser tools, … which will help you explore the Flex Module … and how it relates to the box model. … As of this recording, … Firefox has the best developer tools … to visualize and work with both Flex and Grid, … so, that's the browser I'll be using. … When you encounter a flex container, … like the navigation menu up here or the three cards below, … you'll notice it's highlighted as a flex container … in the HTML Inspector and in the CSS Inspector … and under the layout panel, … you'll find flex container is populated, … any time you select a flex container, … from here you can activate a visual indicator, … either by clicking the toggle under the layout … or just by clicking on the flex identifier … in the HTML Inspector and what you get is a visualization … of the box model applied to the flex container …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes