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

Most people do not understand the knowledge points of this article, "what is the value of flexure 1 in css3"? so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what the flexure value of 1 in css3 refers to".

It means: the magnification ratio of the "flex-grow" project is 1, the reduction scale of the "flex-shrink" project is 1, and the space occupied by the "flex-basis" project is "0%"; flex is the abbreviation of the three attribute values of "flex-grow, flex-shrink, and flex-basis".

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

What does a flexure value of 1 mean in css3

Flex is actually an abbreviation for the combination of the three attribute values of flex-grow flex-shrink flex-basis, and the equivalence is as follows:

Syntax:

Auto | none | [? | |]

Definition:

Flex-grow: defines the magnification of the project, which defaults to 0, that is, it is not zoomed in if there is any remaining space.

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: defines the amount of space the project occupies 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. If the value is 0, units must be added so as not to be considered scalable.

The flex attribute is an abbreviation for flex-grow, flex-shrink, and flex-basis, and the default value is 0 1 auto. The last two attributes are optional.

Detailed introduction:

Flex-grow

The flex-grow property defines the magnification of the project, which defaults to 0, that is, if there is space left, it is not zoomed in.

If all items have a flex-grow property of 1, they will divide the remaining space equally, if any. If the flex-grow property of one project is 2 and all other projects are 1, the former will occupy twice as much remaining space as the other items.

Flex-shrink

The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink. The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.

If the flex-shrink property of all projects is 1, it will be scaled down proportionally when there is insufficient space. If the flex-shrink property of one project is 0 and all other projects are 1, the former will not shrink when there is insufficient space.

Flex-basis

The flex-basis 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.

.item {flex: 1;} / * equals * / .item {flex-grow: 1 flexure shrink: 1 item flex basis: 0%;}. Item {flex: auto;} / * equals * / .item {flex-grow: 1 item flex shrink: 1 item flex basis: auto;}. Item {flex: none;} / * equals * / .item {flex-grow: 0flex flex shrink: 0flex flex basis: auto;}. Flexure: 1 2. } / * is the same as * /. Item {flex-grow: 1 flex shrink: 2 X Flexi basis: 0%;} the above is about "what does flexure 1 in css3 refer to". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.