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

This article mainly introduces what the align-items attribute syntax in css is, and it has a certain reference value. Interested friends can refer to it. I hope you can learn a lot after reading this article.

Align-items attribute

Align-items sets or retrieves the alignment of elastic box elements in the direction of the side axis (vertical axis).

Grammar.

Align-items: flex-start | flex-end | center | baseline | stretch

Each value is resolved:

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 use of stretch (the default):

Case study

. flex-container {

Display:-webkit-flex

Display: flex

-webkit-align-items: stretch

Align-items: stretch

Width: 400px

Height: 250px

Background-color: lightgrey

}

The following example demonstrates the use of flex-start:

Case study

. flex-container {

Display:-webkit-flex

Display: flex

-webkit-align-items: flex-start

Align-items: flex-start

Width: 400px

Height: 250px

Background-color: lightgrey

}

The following example demonstrates the use of flex-end:

Case study

. flex-container {

Display:-webkit-flex

Display: flex

-webkit-align-items: flex-end

Align-items: flex-end

Width: 400px

Height: 250px

Background-color: lightgrey

}

The following example demonstrates the use of center:

Case study

. flex-container {

Display:-webkit-flex

Display: flex

-webkit-align-items: center

Align-items: center

Width: 400px

Height: 250px

Background-color: lightgrey

}

The following example demonstrates the use of baseline:

Case study

. flex-container {

Display:-webkit-flex

Display: flex

-webkit-align-items: baseline

Align-items: baseline

Width: 400px

Height: 250px

Background-color: lightgrey

}

Thank you for reading this article carefully. I hope the article "what is the align-items attribute Grammar in css" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.