| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
In CSS Flexbox, the terms “main axis” and “cross axis” are key concepts that describe the directions in which items are laid out. Understanding these axes is crucial for effectively using Flexbox to design responsive layouts. Let’s delve into these concepts with examples.
Main Axis
The main axis is the primary axis along which flex items are laid out. It is determined by the flex-direction property.
flex-direction: row(default): The main axis runs horizontally from left to right.flex-direction: row-reverse: The main axis runs horizontally from right to left.flex-direction: column: The main axis runs vertically from top to bottom.flex-direction: column-reverse: The main axis runs vertically from bottom to top.
Cross Axis
The cross axis is perpendicular to the main axis. It is used to align items across the container.
- When ‘
flex-direction‘ is ‘row‘ or ‘row-reverse‘, the cross axis runs vertically. - When ‘
flex-direction'is’column‘ or ‘column-reverse‘, the cross axis runs horizontally.
Examples
Example 1: 'flex-direction: row'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Main Axis Example</title>
<style>
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 200px;
background-color: lightgrey;
}
.item {
flex: 1;
padding: 20px;
margin: 10px;
background-color: lightcoral;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the main axis runs horizontally. The items (‘Item 1‘, ‘Item 2‘, ‘Item 3‘) are laid out from left to right.
Example 2: 'flex-direction: column'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Cross Axis Example</title>
<style>
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100vh;
background-color: lightgrey;
}
.item {
flex: 1;
padding: 20px;
margin: 10px;
background-color: lightcoral;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the main axis runs vertically. The items are laid out from top to bottom.
Aligning Items on the Main and Cross Axes
You can use properties like ‘justify-content‘ and ‘align-items‘ to align items along the main and cross axes.
Example 3: 'Aligning Items'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Aligning Items Example</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: center; /* Align items on the main axis */
align-items: center; /* Align items on the cross axis */
width: 100%;
height: 200px;
background-color: lightgrey;
}
.item {
padding: 20px;
margin: 10px;
background-color: lightcoral;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, ‘justify-content: center‘ centers the items along the main axis (horizontally), and ‘align-items: center‘ centers the items along the cross axis (vertically).
Summary
- Main Axis: Determined by ‘
flex-direction‘ (horizontal or vertical). - Cross Axis: Perpendicular to the main axis.
- ‘
justify-content‘: Aligns items along the main axis. 'align-items‘: Aligns items along the cross axis.
