To take advantage of the unique properties of flex (from the English word “flexible”), you first need to change the element type using the display property:

display: flex;

A container with display: flex is called a flex container, and its child elements are called flex items.

Flex items are automatically arranged along the main axis. By default, the main axis runs from left to right.

By default, flex items do not wrap onto a new line and shrink to fit their content. Because of this behavior, it’s often recommended to set a width or allow wrapping for flex items.