What is the difference between main axis and cross axis in Flexbox?

What is the difference between main axis and cross axis in Flexbox?

In Flexbox, the main axis and cross axis are defining the two primary axes in which flex items are laid out within a flex container.

• Main Axis: The main axis is the primary axis along which flex items are laid out. It is defined by the flex-direction property of the flex container. For example, if the flex-direction is set to row, the main axis runs horizontally from left to right.
• Cross Axis: The cross axis is perpendicular to the main axis. It is defined by the axis that is orthogonal to the main axis. For example, if the flex-direction is set to row, the cross axis runs vertically from top to bottom.

Understanding and utilizing the main axis and cross axis in Flexbox is crucial for creating flexible and responsive layouts.