How can you make a responsive layout using Flexbox?

Difficulty: 6/10

flex-direction, flex-wrap, align-items

Creating Responsive Layouts with Flexbox

Flexbox is ideal for building responsive layouts because it allows flex items to grow, shrink, and wrap based on the available container space.

Key Techniques

1
Set the container's display to flex.
2
Use flex-wrap: wrap to allow items to move to the next line when space is limited.
3
Use flexible sizing with flex (e.g., flex: 1 1 200px) so items grow and shrink relative to container size.

Example: Responsive Flexbox Layout

In this example, each .item will grow or shrink based on available space. When the container width is too small, items wrap to the next line, creating a responsive layout without extra CSS.

Scenario Questions

0-2 years experience

Follow-up Questions