The align-items property in CSS Flexbox is used to
align flex items along the cross axis (which is perpendicular to the main
axis).
In Flexbox, you have two directions for laying out items.
1. Main Axis: This is the primary direction in which the items are arranged. By default, it's horizontal (left to right).
2. Cross Axis: This is the direction that runs across the main axis. If the main axis is horizontal (left to right), the cross axis is vertical (top to bottom). If the main axis is vertical, then the cross axis is horizontal.
‘aling-items’ property plays a crucial role in defining how the flex items are positioned within the flex container when there is extra space on the cross axis.
Values of align-items
1. stretch (default): The flex items will stretch to fill the container along the cross axis. If the height (or width, depending on the cross axis) of the container is more than that of the items, the items will stretch to fill it.
2. flex-start: Aligns the flex items at the start of the cross axis. This means items will be at the top if the cross axis is vertical.
3. flex-end: Aligns the flex items at the end of the cross axis. This means items will be at the bottom if the cross axis is vertical.
4. center: Centers the flex items along the cross axis.
5. baseline: Aligns the flex items such that their baselines align.
flex-align-items.html
<!DOCTYPE html>
<html>
<head>
<style>
.title{
background-color: lightgray;
color: black;
font-size: 25px;
margin: 10px;
width: 350px;
}
.container-flex-align-stretch {
display: flex;
height: 150px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
/* align-items: stretch; */ /* It is the default value */
}
.container-flex-align-flex-start {
display: flex;
height: 150px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: flex-start;
}
.container-flex-align-flex-end {
display: flex;
height: 150px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: flex-end;
}
.container-flex-align-center {
display: flex;
height: 150px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: center;
}
.container-flex-align-baseline {
display: flex;
height: 150px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: baseline;
}
.item {
background-color: deepskyblue;
padding: 10px;
margin: 10px;
color: white;
text-align: center;
}
.scenario{
margin-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div class = "scenario">
<h1 class="title">stretch</h1>
<div class="container-flex-align-stretch">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">flex-start</h1>
<div class="container-flex-align-flex-start">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">flex-start</h1>
<div class="container-flex-align-flex-end">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">center</h1>
<div class="container-flex-align-center">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">baseline</h1>
<div class="container-flex-align-baseline">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
</body>
</html>
For the flex-direction column
flex-align-items-direction-column.html
<!DOCTYPE html>
<html>
<head>
<style>
.title{
background-color: lightgray;
color: black;
font-size: 25px;
margin: 10px;
width: 350px;
}
.container-flex-align-stretch {
display: flex;
height: 250px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
/* align-items: stretch; */ /* It is the default value */
flex-direction: column;
}
.container-flex-align-flex-start {
display: flex;
height: 250px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: flex-start;
flex-direction: column;
}
.container-flex-align-flex-end {
display: flex;
height: 250px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: flex-end;
flex-direction: column;
}
.container-flex-align-center {
display: flex;
height: 250px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: center;
flex-direction: column;
}
.container-flex-align-baseline {
display: flex;
height: 250px;
border: 2px solid black;
padding: 10px;
margin: 10px;
width: 90vw;
align-items: baseline;
flex-direction: column;
}
.item {
background-color: deepskyblue;
padding: 10px;
margin: 10px;
height: 5px;
color: white;
text-align: center;
}
.scenario{
margin-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div class = "scenario">
<h1 class="title">stretch</h1>
<div class="container-flex-align-stretch">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">flex-start</h1>
<div class="container-flex-align-flex-start">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">flex-start</h1>
<div class="container-flex-align-flex-end">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">center</h1>
<div class="container-flex-align-center">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
<div class = "scenario">
<h1 class="title">baseline</h1>
<div class="container-flex-align-baseline">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment