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
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain more about how the cross axis works in Flexbox?
What are some common use cases for changing the flex-direction?
How do I choose between using row or column for my layout?
Awesome!
Completion rate improved to 7.69Axes in Flexbox
Pyyhkäise näyttääksesi valikon
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
Kiitos palautteestasi!
