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

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

Flex-direction:row | row-reverse | column | column-reverse; horizontal | reverse horizontal | Vertical | reverse Vertical

Flex-wrap: nowrap | wrap | wrap-reverse; does not wrap | Line break | Line break. The first line is below

Flex-flow: flex-flow: | |

Justify-content: alignment on the spindle.

Flex-start | flex-end | center | space-between | space-around

Left alignment | right alignment | Middle | alignment at both ends | Equal interval

Align-items: attributes define how items are aligned on cross axes.

Flex-start | flex-end | center | baseline | stretch

Alignment of the start of the cross axis | alignment of the end | alignment of the midpoint | alignment of the baseline of the first line of text | height is not set or set to auto occupies the height of the entire container

Align-content: the alignment of multiple axes. If the project has only one axis, this property does not work

Flex-start | flex-end | center | space-between | space-around | stretch

Six properties of the project:

Order: defines the order in which items are arranged. The lower the number, the higher the arrangement, and the default is 0.

Flex-grow: the attribute defines the magnification of the project. The default is 0, that is, if there is any space left, the magnification is not magnified by 1.

Flex-shrink: defines the reduction scale of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.

Flex-basis: the attribute defines the principal axis space (main size) occupied by the project before allocating excess space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.

It can be set to the same value as the width or height property (such as 350px), and the project will occupy a fixed space.

Flex: attribute is short for flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto.

The align-self: self attribute allows individual items to be aligned differently from other items, overriding the align-items attribute. The default value is auto, which inherits the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

Thank you for reading this article carefully. I hope the article "how to use flex attributes in Css3" shared by the editor will be helpful to everyone. 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.