| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
let’s delve into the various Flexbox properties in CSS with detailed explanations and examples:
1. flex-direction
The ‘flex-direction‘ property specifies the direction of the flex items within a flex container.
Values:
- ‘
row‘ (default): Items are placed in a row, from left to right. - ‘
row-reverse‘: Items are placed in a row, from right to left. - ‘
column‘: Items are placed in a column, from top to bottom. - ‘
column-reverse‘: Items are placed in a column, from bottom to top.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row; /* Change this to row-reverse, column, or column-reverse to see different effects */
background-color: lightgray;
}
.item {
background-color: dodgerblue;
padding: 10px;
margin: 5px;
color: white;
}
</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>
2. flex-wrap
The ‘flex-wrap‘ property specifies whether the flex items should wrap or not when there is not enough space in the flex container.
Values:
- ‘
nowrap‘ (default): All flex items will be on one line. - ‘
wrap‘: Flex items will wrap onto multiple lines, from top to bottom. - ‘
wrap-reverse‘: Flex items will wrap onto multiple lines, from bottom to top.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap; /* Change this to nowrap or wrap-reverse to see different effects */
background-color: lightgray;
}
.item {
background-color: dodgerblue;
padding: 10px;
margin: 5px;
color: white;
flex: 1 1 200px; /* This means items will try to be 200px wide, but will shrink/grow as necessary */
}
</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 class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
3. justify-content
The ‘justify-content‘ property aligns the flex items along the main axis of the flex container.
Values:
- ‘
flex-start‘ (default): Items are packed toward the start of the flex container. - ‘
flex-end‘: Items are packed toward the end of the flex container. - ‘
center‘: Items are centered along the main axis. - ‘
space-between‘: Items are evenly distributed with the first item at the start and the last item at the end. - ‘
space-around‘: Items are evenly distributed with equal space around them. - ‘
space-evenly‘: Items are distributed so that the space between any two items, and the space to the edges, is the same.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center; /* Change this to flex-start, flex-end, space-between, space-around, or space-evenly to see different effects */
background-color: lightgray;
}
.item {
background-color: dodgerblue;
padding: 10px;
margin: 5px;
color: white;
}
</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>
4. align-items
The ‘align-items‘ property aligns the flex items along the cross axis of the flex container.
Values:
- ‘
stretch‘ (default): Items are stretched to fill the container. - ‘
flex-start‘: Items are aligned at the start of the cross axis. - ‘
flex-end‘: Items are aligned at the end of the cross axis. - ‘
center‘: Items are centered along the cross axis. - ‘
baseline‘: Items are aligned such that their baselines align.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center; /* Change this to flex-start, flex-end, stretch, or baseline to see different effects */
height: 200px;
background-color: lightgray;
}
.item {
background-color: dodgerblue;
padding: 10px;
margin: 5px;
color: white;
}
</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>
5. align-content
The ‘align-content‘ property aligns the flex lines when there is extra space in the cross axis. This property affects the entire flex container, not individual flex items.
Values:
- ‘
stretch‘ (default): Lines are stretched to take up the remaining space. - ‘
flex-start‘: Lines are packed toward the start of the flex container. - ‘
flex-end‘: Lines are packed toward the end of the flex container. - ‘
center‘: Lines are centered along the cross axis. - ‘
space-between‘: Lines are evenly distributed with the first line at the start and the last line at the end. - ‘
space-around‘: Lines are evenly distributed with equal space around them. - ‘
space-evenly‘: Lines are distributed so that the space between any two lines, and the space to the edges, is the same.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
align-content: space-around; /* Change this to stretch, flex-start, flex-end, center, space-between, or space-evenly to see different effects */
height: 300px;
background-color: lightgray;
}
.item {
background-color: dodgerblue;
padding: 10px;
margin: 5px;
color: white;
flex: 1 1 200px; /* This means items will try to be 200px wide, but will shrink/grow as necessary */
}
</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 class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
