CSS FlexboxLesson 79Free preview

Flexbox Intro

This lesson is part of CSS · All levels

Summary

Flexbox is a CSS layout module designed to arrange elements in one dimension, both horizontal and vertical, with much better layout control than float. With `display: flex`, a container becomes a flex container and its children become flex items. The main concept is the main axis and the cross axis which are the reference points of the system.

Key points

`display: flex` on the parent element activates the flex layout for the whole child
The direct product of the flex container is called flex items
`flex-direction` determines the direction of the main axis: `row` or `column`
The order follows the main axis and the cross axis.

Full lesson

Code examples and quizzes

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