Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the align-self attribute in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. The align-self attribute defines the alignment of flex subitems separately in the direction of the side axis (vertical axis).

2. Align-self has an extra auto (default), which represents the align-items attribute value inherited from the flex container.

Example

.container {/ * define flex container * / display: flex / * set the arrangement direction of the 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 the elements in the container on the cross axis stretch: when the height of the element is not set The height of the element is stretched to the height of the container consistent (default) flex-start: align the start position (up / left) on the cross axis flex-end: align the end position up (down / right) on the cross axis center: align baseline: make sure the text in the element is on the same base Alignment (make sure each 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 / * override the alignment of elements on the cross axis in the container auto: default, which inherits the align-items attribute of the parent element stretch: when the height of the element is not set The height of the element is stretched to the height of the container consistent (default) flex-start: align flex-end to the start position (up / left) on the cross axis: align center: align baseline: align the text in the element at the end position (down / right) on the cross axis Same baseline (make sure each text is on the same line) * / align-self: center } .green {background-color: green;} .blue {background-color: blue;} about "how to use align-self attributes in css" is shared here. I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.