CSS FlexboxLesson 82Free preview

Flex Responsive

This lesson is part of CSS · All levels

Summary

Flexbox makes it easy to create responsive layouts because the direction and packaging of the item can be changed through the query media without touching the markup. Horizontal navigation on the widescreen can be stacked vertically on the narrow screen only by switching `flex-direction`. The combination of `flex-wrap` and `justify-content` makes the list of items fit the space available.

Key points

`flex-direction: column` stacks items on a narrow screen via media query
Spreading items from end to end
Let the item move in a row when space is limited
Mobile-first approach: basic style for mobile phones, large screen

Full lesson

Code examples and quizzes

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