Flex layout flexibility in detail

Flexibility

The defining feature of flex scaling is that scaling projects are scalable, which means that the width or height of the telescopic project automatically fills the remaining space. This can be done with the Flex property. A telescopic container will be allocated the remaining space according to the expansion ratio of each scaling item, and the items will be scaled down according to the shrinkage ratio to avoid overflow.

This article mainly and you introduce the CSS Flex layout Scalability (flexibility) of the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Flex Properties

Flex properties can be used to specify parts with a scalable length: an expansion ratio, a shrinkage ratio, and a scaling baseline. When an element is stretched, the Flex property determines the spindle length of the element instead of the spindle length property. If the element is not a scaling item, the Flex attribute does not take effect.

Flex is an abbreviation for Flex-grow, Flex-shrink, flex-basis

. item {    Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]}

1. < ' Flex-grow ' > value is <number>, which specifies the extension ratio of the project, and if this attribute value is omitted from the flex abbreviation, the specified value of Flex-grow is 1;

2. < ' Flex-shrink ' > value is <number> to specify the shrinkage ratio of the project, and if this attribute value is omitted in flex abbreviation, the specified value of Flex-shrink is 1;

3. < ' flex-basis ' > Value <length> | Auto, which is used to define the main spindle space that the project occupies before allocating extra space, that is, the reference value of the child element, flex-basis the specified range depends on the box-sizing; If this property value is omitted from the flex abbreviation, the flex-basis value is 0%.

Several cases of Flex-basis value:

1. Fixed length value, (such as 350px), the item will occupy a fixed length of space;

2. Auto, first retrieves the main dimension of the item (that is, the value of the item's width/height, whether width or height depends on the direction of the spindle, assuming that the direction of the spindle is horizontal), if the main size of the item is not auto, The Flex-basis (base value) of the item takes the value of the master dimension, and if the main dimension of the item is auto (that is, width:auto or the Width property of the item is not set), the content size of the item is used as the base value;

3. Percentage, calculated based on the master dimension of its containing block (that is, the scaled parent container). If the main dimension of the containing block is undefined (that is, the parent container's primary size depends on the child element), the result is calculated as auto.

Common values for Flex

Flex default: Because Flex-grow, Flex-shrink, flex-basis three property values are not set to the default value of 0, 1, auto, the default value for Flex is: flex:0 1 auto;

. item {    flex:0 1 auto;} /* This condition determines the size of the element based on the Width/height property. (If the main dimension of an item is auto, it is based on its content size) when the remaining space is positive, the scaling item cannot be scaled, but when there is not enough space, the scaling item can shrink to its [minimum] value. By default, scaling items do not shrink to smaller than their smallest content size. You can change this default state by setting the "min-width" or "min-height" property. */

flex:0 Auto: As mentioned earlier, if the value of Flex-shrink is omitted from the flex abbreviation, the value is specified as 1, so flex:0 Auto is equivalent to flex:0 1 Auto (that is, the default value for flex);

Flex:initial: With flex:0 1 Auto same;

Flex:auto: If the values of Flex-grow and Flex-shrink are omitted from the flex abbreviation, their values are specified as 1, so flex:auto is equivalent to flex:1 1 auto;

. item {    Flex:auto;  /* equivalent to Flex:1 1 auto;*/}/* determines the size of the element according to the Width/height property, but can be fully retractable, absorbing the remaining space on the spindle * *

Flex:none: Equivalent to flex:0 0 auto;

. item {    flex:none;  /* Equivalent to flex:0 0 auto;*/}/* determines the dimensions of an element according to the Width/height attribute, but it cannot be scaled at all.

When Flex takes a positive value, the positive number is the value of Flex-grow, because the values of Flex-shrink and flex-basis are omitted from the flex abbreviation, and when they are omitted the values are 1, 0%, so flex:1 is equivalent to Flex:1 1 0%;

. item {    flex:1;  /* equivalent to Flex:1 1 0%;*/}/* calculated as the width of the parent container, the element is fully scalable */

When Flex takes a value of one length or percentage, it is treated as flex-basis value, Flex-grow takes 1,flex-shrink 1 (note that 0% is a percentage rather than a non-negative number);

. item {    flex:120px;  /* equivalent to Flex:1 1 120px;*/}.item1 {   flex:0%;/* equivalent to flex:1 1 0%;*/}

When Flex takes a value of two nonnegative digits, it is considered as the value of Flex-grow and Flex-shrink respectively, and Flex-basis takes 0%;

. item {    Flex:2 1;  /* equivalent to Flex:2 1 0%;*/}

When Flex is evaluated as a nonnegative number and a length or percentage, it is treated as a value of Flex-grow and Flex-basis respectively, and Flex-shrink takes 1;

. item {    flex:2 120px;  /* equivalent to Flex:2 1 120px;*/}

Example

The HTML is as follows:

<p class= "box" >    <p class= "item-1" ></p>    <p class= "item-2" ></p>    <p class= "item-3" ></p>  </p>

The CSS is as follows:

. box {  Display:flex;  width:800px;}. Box > P {  height:200px;}. item-1 {  width:160px;  Flex:2 1 0;  Background: #2ecc71;}. item-2 {  width:100px;  Flex:2 1 auto;  Background: #3498db;}. item-3 {  flex:1 1 200px;  Background: #9b59b6;}

The results are as follows:

The total size of the parent container on the spindle is 800px

The total base value of the child element is: 0% + auto + 200px = 300px, where

1. -0% = 0 * 800px = 0 width

2. -Auto corresponding master size is 100px

So the remaining space is 800px-300px = 500px

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

The remaining space allocation is as follows:

1. -Item-1 and Item-2 each allocated 2/5, each 200px

2. -item-3 allocation 1/5, get 100px

The final width of each item is:

1. -item-1 = 0% + 200px = 200px

2. -item-2 = auto + 200px = 300px

3. -item-3 = 200px + 100px = 300px

When the Item-1 benchmark value is 0%, the item is considered to be 0 size, so even if it is declared to be 160px in size, it is useless.

When the Item-2 benchmark value is taken from auto, the value used according to the Rule datum is the main dimension value is 100px, so this 100px will not be included in the remaining space

Summarize

The default value for Flex is not the initial value of a single property, and in the abbreviation for Flex attribute values, the default values for Flex-grow, Flex-shrink, and Flex-basis are 1, 1, and 0%, respectively, instead of the default value of these three attributes 0, 1, auto;

When the item is not set to a fixed width (in the case of horizontal, that is, the width itself is auto), if Flex-basis is also auto, then the Flex-basis value is the width (for horizontal) of the item's content itself.