A Flexbox container allows for a responsive layout structure, giving you complete control over the direction, alignment, order, and size of the boxes.

The flex-direction property defines in which direction a flex container will stack the flex items within.

The flex-wrap property specifies whether the flex items should wrap or not wrap within the flex container.

The justify-content property is used to align the flex items within the flex container.

The align-items property is used to vertically align the flex items within the flex container.

The align-self property defines the alignment for a specified item and overrides the default vertical alignment set by the container’s align-items property.

The align-content property is used to vertically align the wrapped flex lines of items within the flex container.

Using Flexbox, the justify-content property, and align-items property, an element can be centered both horizontally and vertically within it’s parent.

The order property determines the order of a flex item. The first flex item to appear in the code does not have to appear as the first item in the layout.

The flex-basis property specifies the initial length of a flex item.

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items to fill their parent container.

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items while filling their parent container.