flex zoom

flex-grow: Whether to zoom in when the parent control has space left, where the value represents the zoom ratio, and a value of 0 means no zoom;

flex-shrink: When the parent control space is not enough, whether to shrink (shrink), where the value represents the reduction ratio, when the value is 0, it means not to shrink;

flex-basis: indicates the size before the flex items are placed in the flex container, which is the ideal or assumed size of the items, but it is not its true size, its true size depends on the width of the flex container, the min-width of the flex items, max-width and other styles

When the flex-basis and width attributes exist at the same time, the width attribute does not take effect, and the width of the flex item is the width set by flex-basis;
Application guidelines for the width of flex items: flex-basis (subject to max | min-width) priority is greater than width priority is greater than content;

.flex-item{
      flex -basis: 300px;    // failure 
      max- width: 100px;   
}
.item1{
      background: #66efab;
}

Demand: I hope that the content at the bottom is always at the bottom. Only when the middle content reaches the bottom of the screen, the content at the bottom will automatically move out of the screen. Probably the following effect, when the green content reaches the yellow area, the yellow area automatically moves out of the screen:

Solution: 3 child views set a parent view, the parent view sets a min-height: 100%; display: flex; flex-direction: column ;, the middle view sets flex: 1;

flex is the abbreviation of flex-grow, flex-shrink, flex-basis

The default property of flex is 0 1 auto, [the parent control has no remaining controls to enlarge, the parent control space is not enough, press 1 to reduce, to maintain its own space size];

The value of flex: 1; is 1 1 0%, [the parent control has the remaining space to account for 1 enlargement, the parent control space is insufficient to press 1 to reduce, its own space size is 0%];

When the value of flex: none; 0 0 auto;

When the value of flex: auto; is 1 1 auto;

When the value of flex is a non-negative number, the number is the value of flex-grow, flex-shrink takes 1 and flex-basis takes 0%;

When the value of flex is a length or percentage, it is regarded as the value of flex-basis, flex-grow takes 1 and flex-shrink takes 1;

When the value of flex is two non-negative numbers, it is regarded as the value of flex-grow and flex-shrink respectively, and flex-basis takes 0%;

When the value of flex is a non-negative number and a length or percentage, it is regarded as the value of flex-grow and flex-basis respectively, and flex-shrink takes 1;

Original: https://www.douban.com/note/717223803/

https://www.jianshu.com/p/57a94430dcbe

Guess you like