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

Editor to share with you how to use the align-self attribute of css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Align-self

The align-self property sets the alignment of the elastic element itself in the direction of the side axis (vertical axis).

Grammar.

Align-self: auto | flex-start | flex-end | center | baseline | stretch

Each value is resolved:

Auto: if the value of 'align-self' is' auto', its calculated value is the 'align-items' value of the parent element of the element, and if it does not have a parent element, the calculated value is' stretch'.

Flex-start: the boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the starting boundary of the side axis of the row.

Flex-end: the boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the end boundary of the side axis of the row.

Center: the elastic box element is centered on the side axis (longitudinal axis) of the row. (if the size of the row is less than the size of the elastic box element, it overflows the same length in both directions.)

Baseline: if the inline axis of the elastic box element is the same as the side axis, this value is equivalent to 'flex-start'. In other cases, this value participates in baseline alignment.

Stretch: if the property value of the specified side axis size is' auto', its value will make the size of the project's margin box as close as possible to the size of the row, but will also comply with the limit of the 'min/max-width/height' property.

The following example demonstrates the application effect of different values of align-self on elastic sub-elements:

Case study

. flex-item {

Background-color: cornflowerblue

Width: 60px

Min-height: 100px

Margin: 10px

}

.item1 {

-webkit-align-self: flex-start

Align-self: flex-start

}

.item2 {

-webkit-align-self: flex-end

Align-self: flex-end

}

.item3 {

-webkit-align-self: center

Align-self: center

}

.item4 {

-webkit-align-self: baseline

Align-self: baseline

}

.item5 {

-webkit-align-self: stretch

Align-self: stretch

}

The above is all the content of the article "how to use the align-self attribute of css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.