Shulou(Shulou.com)05/31 Report--

This article mainly introduces the "css style how to use the flex attribute" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, hope that this "css style how to use the flex attribute" article can help you solve the problem.

In css, the flex property is used to set or retrieve how the children of the elastic box model object allocate space; it is an abbreviated attribute of the "flex-grow", "flex-shrink", and "flex-basis" attributes with the syntax of "flex: abbreviated property value;".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the use of the flex attribute in the css style

The flex property is used to set or retrieve how the child elements of the elastic box model object allocate space.

The flex property is the abbreviated property of the flex-grow, flex-shrink, and flex-basis properties.

Note: if the element is not a child of the elastic box model object, the flex attribute has no effect.

The syntax is as follows:

Flex: flex-grow flex-shrink flex-basis | auto | initial | inherit

The values of the property are as follows:

Flex-grow a number that specifies the amount by which the project will be expanded relative to other flexible projects.

Flex-shrink a number that specifies the amount by which the project will shrink relative to other flexible projects.

The length of the flex-basis project. Legal value: "auto", "inherit" or a number followed by "%", "px", "em" or any other unit of length.

Auto is the same as 11 auto.

None is the same as 0 auto.

Initial sets this property to its default value, which is 0 1 auto.

Inherit inherits this attribute from the parent element.

Examples are as follows:

123 # main {width:220px;height:300px;border:1px solid black;display:flex;} # main div {flex:1;} Red, Blue, Green div with more content

Note: the flex attribute is not supported in Internet Explorer 9 and earlier.

Note: Internet Explorer 10 is supported by the-ms-flex attribute. The flex attribute is fully supported in IE11 and later versions (the-ms- prefix is not required).

Note: Safari 6. 1 (and updated browsers) is supported through the-webkit-flex attribute.

Output result:

This is the end of the content about "how to use the flex attribute in css style". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.