Getting Started with Flexbox

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 container class with display property set to flex, making it a flex container.

• Line 2: The display:flex rule 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.