W3.CSSLesson 12Free preview

W3.CSS Flexbox

This lesson is part of W3.CSS · All levels

Summary

Flexbox is a CSS layout model for arranging items in one direction, both rows and columns, with automatic space sharing. With W3.CSS you activate it via the w3-flex class on the container, while the children become the flex item. This model is perfect for menus, toolbars, parallel cards, and elements that need to fit in space.

Key points

Flexbox assembles items on one axis, horizontal or vertical
The parent element becomes a flex container with display: flex
Justify-content regulates the distribution of space on the main axis
Align-items set the position of the item on the cross-axis
Flex items can increase and decrease following the space available

Full lesson

Code examples and quizzes

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