point.comCSS Main Axis and Cross Axis
In flexbox, main axis and cross axis refer to two perpendicular axes that define the layout direction of flex items within a flex container.
Main Axis
The main axis is defined by the flex-direction property and determines the direction in which flex items are laid out and the direction of flex-wrap. It also defines the start and end sides of the flex container.
flex-direction: row (Default)
- The main axis is horizontal (left-to-right).
- Flex items are laid out in a row from left to right (by default, in LTR languages).
.container {
display: flex;
flex-direction: row; /* Main axis is horizontal */
}
- Main axis: Horizontal (left to right).
- Cross axis: Vertical (top to bottom).
flex-direction: column
- The main axis is vertical (top-to-bottom).
- Flex items are arranged from top to bottom.
.container {
display: flex;
flex-direction: column; /* Main axis is vertical */
}
- Main axis: Vertical (top to bottom).
- Cross axis: Horizontal (left to right).
flex-direction: row-reverse
The main axis is horizontal (left to right), but the flex items are arranged in reverse order (right to left).
.container {
display: flex;
flex-direction: row-reverse; /* Main axis is horizontal, but in reverse order */
}
- Main axis: Horizontal (right to left).
- Cross axis: Vertical (top to bottom).
flex-direction: column-reverse
The main axis is vertical (top to bottom), but the flex items are arranged in reverse order (bottom to top).
.container {
display: flex;
flex-direction: column-reverse; /* Main axis is vertical, but in reverse order */
}
- Main axis: Vertical (bottom to top).
- Cross axis: Horizontal (left to right).
Cross Axis
The cross axis is perpendicular to the main axis and determines the direction in which flex items are sized and aligned. It also defines the cross-start and cross-end sides of the flex container.
- If the main axis is horizontal (like row), the cross axis is vertical.
- If the main axis is vertical (like column), the cross axis is horizontal.
Main Axis and Cross Axis Relationship
| flex-direction | Main Axis | Cross Axis |
|---|---|---|
| row (default) | Horizontal (left to right) | Vertical (top to bottom) |
| column | Vertical (top to bottom) | Horizontal (left to right) |
| row-reverse | Horizontal (right to left) | Vertical (top to bottom) |
| column-reverse | Vertical (bottom to top) | Horizontal (left to right) |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
flex-direction: row; /* Main axis is horizontal */
justify-content: space-between; /* Distribute space along the main axis */
align-items: center; /* Align items along the cross axis (vertically) */
height: 200px;
background-color: lightgray;
}
.item {
width: 100px;
height: 50px;
background-color: lightblue;
}
.item1 {
background-color: lightgreen;
}
.item2 {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Quickly Find What You Are Looking For
OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.
Color Picker
