1. The align-self attribute defines the alignment of flex items individually in the side axis (vertical axis) direction.
2. align-self has an additional auto (default value), which represents the align-items attribute value inherited from the flex container.
Example
.container{
/* Define flex container */
display: flex;
/*
Set the arrangement direction of elements inside the container row: define the arrangement direction from left to right row-reverse: from right to left column: from top to bottom column-reverse: from bottom to top
*/
flex-direction: row;
/*
Set the alignment of elements in the container on the cross axis stretch: When the height of the element is not set, the height of the element will be stretched to the same height as the container (default)
flex-start: Toward the starting position (up/left) on the cross axis. Align flex-end: Towards the end position (downward/right) on the cross axis. Alignment center: Centered alignment baseline: Ensure that the text in the element is at the same time. A baseline (make sure every text is on the same line)
*/
align-items: baseline;
height: 800upx;
background-color: #FFC0CB;
}
.txt{
font-size: 20px;
width: 150upx;
height: 150upx;
}
.red{
background-color: red;
/*
Rewrite the alignment of elements in the container on the cross axis auto: Default, indicating inheriting the align-items property of the parent element stretch: When the height of the element is not set, the height of the element will be stretched to the same height as the container (default)
flex-start: Toward the starting position (up/left) on the cross axis. Align flex-end: Towards the end position (downward/right) on the cross axis. Alignment center: Centered alignment baseline: Ensure that the text in the element is at the same time. A baseline (make sure every text is on the same line)
*/
align-self: center;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}The above is an introduction to the align-self attribute in CSS. I hope it will be helpful to everyone.