Getting Started with Flexbox
Explore the basics of Flexbox to create responsive and flexible web layouts. Learn how to set up a flex container, control item direction with flex-direction, manage wrapping with flex-wrap, and combine these using flex-flow. This lesson helps you build clear, adaptable designs that work well across devices by mastering Flexbox fundamentals.
Flexbox, or the Flexible Box Layout Module, is a powerful CSS layout model that allows us to create responsive and efficient web pages. In this lesson, we’ll explore how to set display: flex and understand the main axis. We’ll also look at using flex-direction and flex-wrap to control the layout of flex items.
Understanding the main axis of Flexbox
To start using Flexbox, we need to set the container’s display property to flex. This establishes a flex container, and its direct children become flex items laid out along the main axis.
In the CSS code above:
Line 1: You have a
containerclass withdisplayproperty set toflex, making it a flex container.Line 2: The
display:flexrule makes child<div>elements become flex items, arranging them along the main axis. By default, the main axis is horizontal (left to right), so the items appear in a row.
Adjusting flex-direction
The flex-direction property defines the direction of the main axis and the order of flex items.