CSS Visual ToolsLesson 72Free preview

Flexbox Playground

This lesson is part of Web Developer Tools · All levels

Summary

Flexbox playground helps to try out one-dimensional layout properties interactively. You can change the flex-direction, justify-content, align-items, gaps, and flex on the item and then see the result in an instant. Flexbox is very useful for navigation, card routing, and content layout within containers.

Key points

Flex containers arrange their children on the main and cross-axes
Flex-direction determines the direction of the main axis, e.g. row or column
Justify-content leveling items on the main axis
Align-items align items on the cross axis
Flex: 1 makes the item grow to fill the remaining space

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.