HTML & CSS LayoutLesson 22Free preview

Flexbox

This lesson is part of Intro to HTML & CSS · All levels

Summary

Flexbox is a one-dimensional layout model that facilitates the spread, alignment, and alignment of spacing between items in a single row or column. You'll study container properties like flex display, flex-direction, justify-content, align-items, as well as property of items like flex. With flexboxes, components like the navbar and button become much easier to assemble.

Key points

Activate with display: flex on container
Justify-content sets the main axis, align-items set the cross axis
Flex: 1 makes the growing item fill the space available

Full lesson

Code examples and quizzes

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