(29 messages) flex:1; details

Original address:https://segmentfault.com/q/1010000004080910/a-1020000004121373

For reference only!

First, make it clear that flex is the abbreviation of flex-grow, flex-shrink, flex-basis. So its value can be taken into account as follows:

The default value for flex is a combination of the above three attribute values. Assuming the same default value for the above three attributes, the default value for flex is 0 1 auto. Similarly, the following are the same:

.item {flex: 2333 3222 234px;}.item {    flex-grow: 2333;    flex-shrink: 3222;    flex-basis: 234px;}

When flex is none, the calculated value is 0 auto, which is the same as the following:

.item {flex: none;}.item {    flex-grow: 0;    flex-shrink: 0;    flex-basis: auto;}

When flex is auto, the calculated value is 1 auto, which is the same as the following:

.item {flex: auto;}.item {    flex-grow: 1;    flex-shrink: 1;    flex-basis: auto;}

When flex is a non-negative number, the number is flex-grow th, flex-shrink is 1, flex-basis is 0%, and the following is the same:

.item {flex: 1;}.item {    flex-grow: 1;    flex-shrink: 1;    flex-basis: 0%;}

When flex is a length or percentage, it is considered a flex-basis value, flex-grow th is 1, flex-shrink is 1, and the same is true (note that 0% is a percentage, not a non-negative number):

.item-1 {flex: 0%;}.item-1 {    flex-grow: 1;    flex-shrink: 1;    flex-basis: 0%;}.item-2 {flex: 24px;}.item-1 {    flex-grow: 1;    flex-shrink: 1;    flex-basis: 24px;}

When flex is taken as two non-negative numbers, the values are considered flex-grow th and flex-shrink, respectively, and flex-basis is taken as 0%, which is the same as the following:

.item {flex: 2 3;}.item {    flex-grow: 2;    flex-shrink: 3;    flex-basis: 0%;}

When flex is a non-negative number and a length or percentage, it is treated as the values of flex-grow th and flex-basis, respectively. Fl-shrink is taken as 1, which is the same as the following:

.item {flex: 2333 3222px;}.item {    flex-grow: 2333;    flex-shrink: 1;    flex-basis: 3222px;}

Flex-basis specifies the base value for the child element. So the calculation of whether or not to overflow depends on this property. The scope of flex-basis depends on box-sizing. Here the following flex-basis values are discussed:

  • Auto: The primary dimension of the child element is retrieved first. If the primary dimension is not auto, the value of the primary dimension is used; if it is also auto, the value of content is used.

  • Content: refers to the automatic layout based on the content of the child element. Some user agents do not implement content value, the equivalent alternative is flex-basis and auto for the main dimension.

  • Percentage: Calculated based on the main size of the containing block (i.e., the telescopic parent container). If the main size of the containing block is undefined (i.e., the main size of the parent container depends on the child element), the result is the same as auto.

To illustrate the difference between a different value:

<div class="parent">    <div class="item-1"></div>    <div class="item-2"></div>    <div class="item-3"></div></div> <style type="text/css">    .parent {        display: flex;        width: 600px;    }    .parent > div {        height: 100px;    }    .item-1 {        width: 140px;        flex: 2 1 0%;        background: blue;    }    .item-2 {        width: 100px;        flex: 2 1 auto;        background: darkblue;    }    .item-3 {        flex: 1 1 200px;        background: lightblue;    }</style>
  • Total size of parent container on spindle is 600px

  • The total base value for the child elements is: 0% + auto + 200px = 300px, where

    - 0% 0 Width- auto For the main size of the application, that is, 100 px
  • So the remaining space is 600px - 300px = 300px

  • The sum of the scaling magnification factor is: 2 + 2 + 1 = 5

  • The remaining space is allocated as follows:

    - item-1 and item-2 Allocation 2/5,Gauda 120 px- item-3 Allocation 1/5,Get 60 px
  • The final width of each project is:

    - item-1 = 0% + 120px = 120px- item-2 = auto + 120px = 220px- item-3 = 200px + 60px = 260px
  • When the item-1 benchmark value is 0%, the item is treated as zero size, so even if it is declared to be 140 px, it is useless and imaginary.

  • When the item-2 datum is auto, the value used according to the rule datum is the primary dimension value, which is 100px, so that 100px will not be included in the remaining space


---------------------
Author: fengyjch
Source: CSDN
Original:https://blog.csdn.net/fengyjch/article/details/79047908
Copyright Statement: This is an original article by the previous author. Please attach a link to your blog and ask fengyjch!

Tags: css

Posted on Sun, 19 Sep 2021 17:53:09 -0400 by amavadia