Introduction to Flexbox

Approach to web design for making web pages render well on a variety of devices.

Flexbox, or the Flexible Box Layout, is a powerful layout tool that provides a more efficient way to align, distribute space, and manipulate items in a container, even when their sizes are unknown or dynamic. It is a one-dimensional layout model, meaning it deals with either rows or columns, but not both simultaneously.

Understanding the Flexbox Model

In the Flexbox model, the parent becomes a flex container and its children become flex items. The flex container expands items to fill available free space or shrinks them to prevent overflow.

Flex Container and Flex Items

The flex container is the parent element that you want to turn into a flexible box for layout purposes. This is done by setting its display property to flex or inline-flex. Once you do this, the direct children of this container automatically become flex items.

.container {
  display: flex;
}

In the above example, .container is the flex container and its direct children are the flex items.

Main Axis and Cross Axis in Flexbox

The main axis is the primary axis along which flex items are laid out. It is not necessarily horizontal; it depends on the flex-direction property, which we will cover in the next unit. The start and end of this axis are called the main start and main end.

The cross axis is perpendicular to the main axis. Its direction depends on the main axis direction. The start and end of this axis are called the cross start and cross end.

Understanding these axes is crucial as many flexbox properties are based on these axes, not traditional layout block and inline directions.

In this unit, we have introduced the Flexbox model, the concept of flex containers and flex items, and the main and cross axes. In the next unit, we will delve deeper into the properties of flex containers and flex items, and how they can be manipulated to create flexible and responsive layouts.