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.