Main Axis and Cross Axis
Flex Box Layout applies a one-dimensional model while Grid Layout applies a two-dimensional model. In the one-dimensional model, you need to define in which direction you are building the design – the main axis. As the flexbox-related properties work depending on the main axis direction, it is important to understand which direction the main axis of the flexbox you are handling runs in.
Main Axis
The flex-direction property defines which direction the main axis runs in.
- When you set
roworrow-reversein theflex-direction, the horizontal axis becomes the main axis. - When you set
columnorcolumn-reversein theflex-direction, the vertical axis becomes the main axis.
Cross Axis
The axis that runs perpendicular to the main axis is called the cross axis in Flex Box.
- When you set
roworrow-reversein theflex-direction, the vertical axis becomes the cross axis. - When you set
columnorcolumn-reversein theflex-direction, the horizontal axis becomes the cross axis.
Start and End
Some flex box properties use the keywords start and end. The meanings of start and end depend on the main axis.
- When the horizontal axis is the main axis,
startmeans the left edge whileendmeans the right edge. - When the vertical axis is the main axis,
startmeans the top edge whileendmeans the bottom edge.
You can also learn this topic offline. Click 
.
More Topics to Explore
Prototype Interaction Settings and Practice
Create Text Input Forms and Submit Button
