Axes in Flexbox
To use Flexbox effectively for layout, you first need to understand its two fundamental axes: the main axis and the cross axis. In Flexbox, the main axis is the direction in which flex items are laid out by default. This direction is controlled by the flex-direction property. The cross axis is always perpendicular to the main axis. If you think of the main axis as a road, the cross axis would be the street that crosses it. The way your items are arranged—either in a row (horizontally) or a column (vertically)—depends on which axis is set as the main axis.
index.html
In the example above, the container uses display: flex with flex-direction: row. This means the main axis runs horizontally, from left to right. The flex items (A, B, C) are arranged in a row along this axis. The cross axis is vertical, running from top to bottom.
If you change the flex-direction to column, the axes swap: the main axis becomes vertical and the cross axis becomes horizontal. This simple switch completely changes the flow of your layout.
index.html
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 7.69Axes in Flexbox
Svep för att visa menyn
To use Flexbox effectively for layout, you first need to understand its two fundamental axes: the main axis and the cross axis. In Flexbox, the main axis is the direction in which flex items are laid out by default. This direction is controlled by the flex-direction property. The cross axis is always perpendicular to the main axis. If you think of the main axis as a road, the cross axis would be the street that crosses it. The way your items are arranged—either in a row (horizontally) or a column (vertically)—depends on which axis is set as the main axis.
index.html
In the example above, the container uses display: flex with flex-direction: row. This means the main axis runs horizontally, from left to right. The flex items (A, B, C) are arranged in a row along this axis. The cross axis is vertical, running from top to bottom.
If you change the flex-direction to column, the axes swap: the main axis becomes vertical and the cross axis becomes horizontal. This simple switch completely changes the flow of your layout.
index.html
Tack för dina kommentarer!
