Flexbox

Flex box (Flexible Box Layout) is a powerful CSS layout module that makes it easy to align, space, and order elements in a row or column.

The CSS Flexbox (Flexible Box Layout) module is a one-dimensional layout model used to arrange items in rows or columns, providing an efficient way to align, space, and resize elements dynamically within a container. It is highly effective for building responsive UI components and small-scale layouts.

The main axis is defined by flex-direction, which has four possible values: row, row-reverse, column, column-reverse.

Should you choose row or row-reverse, your main axis will run along the row in the inline direction.

The cross axis runs perpendicular to the main axis. Therefore, if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.

If flex-direction is set to row then the cross axis runs in the block direction.

If your main axis is column or column-reverse then the cross axis runs along the rows.

Changing flex-direction:

Adding the flex-direction property to the flex container allows us to change the direction in which our flex items display. Setting flex-direction: row-reverse will keep the items displaying along the row, however the start and end lines are switched.

If we change flex-direction to column the main axis switches and our items now display in a column. Set column-reverse and the start and end lines are again switched.

The live sample below has flex-direction set to row-reverse. Try the other values — row, column and column-reverse — to see what happens to the content.

ref:https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts