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

This article mainly introduces the use of flex attributes, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1.flex-direction

Used to specify the direction of the flex principal axis, which in turn determines the location of the flex subitems in the flex container

Row, the default value, indicates that the horizontal direction is arranged from left to right, where the horizontal direction is the principal axis

Row-reverse, as opposed to row

Column, which indicates that the vertical direction is arranged from top to bottom, and the vertical direction is the principal axis

Column-reverse, as opposed to column

2.flex-wrap

Used to specify whether flex subitems wrap

Nowrap, the default value, means no line wrapping, and flex subkey may overflow

Wrap, indicating a line break, and the overflowed flex subitems will be changed to the next line

Wrap-reverse, which indicates a line break in the opposite direction

3.flex-flow

Equivalent to the combined writing of flex-direction and flex-wrap

4.justify-content

Alignment for horizontal flex subitems

Flex-start, the default value, aligns with the start position of the line

Flex-end, which indicates alignment with the end position of the line

Center, which indicates alignment to the middle of the line

Space-between, which indicates that the two ends are aligned and the middle spacing is equal. Pay attention to special cases. When the remaining space is negative or there is only one item, the effect is the same as flex-start.

Space-around, which means that the spacing is equal, and the middle spacing is twice that of both ends. Pay attention to special cases. When the remaining space is negative or there is only one term, the effect is equivalent to center.

5.align-items

Alignment for vertical flex subitems

Stretch, the default value. When the height of the flex child is not set or the height is auto, stretch plays a role. Set the height of the flex child to the height of the row. If there is only one row, the height of the row is the height of the container.

Flex-start, which is aligned with the start position of the side axis

Flex-end, which indicates alignment with the position at the end of the side axis

Center, which indicates alignment with the middle of the side axis

6.align-content

This attribute is used for the alignment of multiple lines only in the case of multiple lines

Stretch, the default value. When the height of the flex child is not set or the height is auto, stretch plays a role. Set the height of the flex child to the height of the row. If there is only one row, the height of the row is the height of the container.

Flex-start, which is aligned with the start position of the side axis, next to the start position of the side axis, and each line after that is next to the first line

Flex-end, which is aligned with the end position of the side axis, next to the end position of the side axis, and each line after that is next to the previous line

Center, indicating that each line is aligned with the middle of the side axis

Space-between, which indicates that the ends are aligned and the middle spacing is equal. When the remaining space is negative or has only one item, the effect is the same as flex-start.

Space-around, which means that the spacing is equal, and the middle spacing is twice that of both ends. Pay attention to special cases. When the remaining space is negative or there is only one term, the effect is equivalent to center.

= when this attribute is made for multiple rows, it has no effect on a container with only one row. This attribute can well handle the spacing between adjacent rows after air swap = =

Thank you for reading this article carefully. I hope the article "what is the use of flex attributes" shared by the editor will be helpful to everyone? at the same time, I also hope that 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.