CSS Flexbox

CSS Flexbox is a powerful layout system that provides a flexible way to arrange and align elements within a container. It allows you to create complex layouts without using floats or positioning. In this chapter, we will discuss the syntax and provide examples of how to use CSS Flexbox.

Flex Container and Flex Items

In Flexbox, we have two main components: the flex container and the flex items. The flex container is the parent element that holds the flex items. To turn an element into a flex container, we use the display: flex property.

.container {
 display: flex;
}

Once the container is set to display: flex, all direct child elements become flex items.

Flex Direction

The flex-direction property determines the direction of the main axis of the flex container. The main axis is the axis along which flex items are laid out.

.container {
 display: flex;
 flex-direction: row; /* default */
}

The default value of flex-direction is row. Other possible values are column, row-reverse, and column-reverse.

Justify Content

The justify-content property determines how flex items are positioned along the main axis of the flex container.

.container {
 display: flex;
 justify-content: flex-start; /* default */
}

The default value of justify-content is flex-start. Other possible values are flex-end, center, space-between, space-around, and space-evenly.

Align Items

The align-items property determines how flex items are positioned along the cross axis of the flex container.

.container {
 display: flex;
 align-items: stretch; /* default */
}

The default value of align-items is stretch. Other possible values are flex-start, flex-end, center, and baseline.

Flex Wrap

The flex-wrap property determines whether flex items are forced onto a single line or allowed to wrap onto multiple lines.

.container {
 display: flex;
 flex-wrap: nowrap; /* default */
}

The default value of flex-wrap is nowrap. Other possible values are wrap and wrap-reverse.

Align Content

The align-content property determines how multiple lines of flex items are positioned along the cross axis of the flex container.

.container {
 display: flex;
 align-content: stretch; /* default */
}

The default value of align-content is stretch. Other possible values are flex-start, flex-end, center, space-between, space-around, and space-evenly.

Flex Items

Flex items have their own properties that can be set to control their layout. Some of the most commonly used properties are:

• flex-grow: specifies how much the flex item should grow relative to the other flex items in the container
• flex-shrink: specifies how much the flex item should shrink relative to the other flex items in the container
• flex-basis: specifies the initial size of the flex item
• order: specifies the order in which the flex item appears in the container

.item {
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;
 order: 0;
}

CSS Flexbox is a powerful layout tool that allows for flexible and responsive design without the need for complex positioning or floats. By using the properties outlined in this article, you can create dynamic and engaging layouts that adapt to any screen size or device.