Flexbox Basics

Flexbox is a layout mode in CSS that makes it easier to create responsive and flexible layouts. It allows elements within a container to be aligned, distributed and stretched more intuitively.

Setting up a flex container

To create a flex container, you need to set the display property of an element to flex or inline-flex. They allow you to specify how elements should be aligned along the main and cross axes and how they should distribute remaining space or shrink to fit the available space.
For example:

When this property is applied to the container element, we can use multiple flexbox-related properties on the element and the child elements. Following are some of the basic properties that are used quite often:

Flex-direction

The flex-direction property determines the direction in which the flex items are laid out. The default value is row, which means the flex items are laid out in a row from left to right. You can also set it to column, which means the flex items are laid out in a column from top to bottom.
For example

The following are other values that may be applied:
row-reverse: Elements are arranged horizontally, from right to left.
column-reverse: Elements are arranged vertically, from bottom to top.

Flex-wrap

The flex-wrap property determines whether the flex items should wrap to the next line when they reach the end of the container. The default value is nowrap, which means the flex items will not wrap. You can set it to wrap, which means the flex items will wrap to the next line when they reach the end of the container.

You can also set the value to wrap-reverse, in which elements are allowed to wrap onto multiple lines in the opposite direction.