Enable elastic layout

Through the display: flex; Property to enable elastic layout

How do flex children allocate space

Flex is short for the flex-grow, Flex-shrink, and Flex-basis properties

  • Default: 0 1 Auto
  • No inheritance
  • The default value is 0. Remaining width = Total width – Actual width of elements Expanded width = original width of elements + (Sum of remaining width/ratio *) Expansion ratio)
  • The default is 1. Now the total remaining width = total width (the actual width of the element – ADAPTS to the sum of the widths of two elements if any element does not participate in shrinking You need to subtract the width of the element that does not participate in the contraction. The contraction width of the element = (the actual width of the element/the total width) * the remaining width
  • Flex-basis is the minimum width of the space allocated before it is allocated.auto,inheritOr with one%,px,emOr any other unit of length

test

What is the width ratio of the following layout on the page?

// css
.box {
    display: flex;
    width: 200px;
    height: 100px;
}
.left {
    flex: 3 2 50px;
    background: red;
}
.right {
    flex: 2 1 200px;
    background: blue;
}
// html
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
Copy the code

A 2:3 B 1:5 C 1:3 D: 3:2

The correct answer is B

parsing

  • The total width is 200
  • left + right = 250
  • Remaining width less than 200-250 = -50
  • Flex-shrink only works if the sum of the default widths of the content is greater than the container

    It is calculated as follows: The weight of each element’s shrink is flex-shrink multiplied by its width
    • left: 50 * 2 = 100
    • right: 200 * 1 = 200
  • So the total weight is 100 plus 200 is equal to 300
  • Element shrinkage = remaining width * reduction ratio * Actual width/total weight
  • The elements shrink separately:

    • Left: -50 (remaining width) * 2 (reduction ratio) * 50 (actual width) / 300 (total weight) = -16.66666
    • Right: -50 (remaining width) * 1 (reduction ratio) * 200 (actual width) / 300 (total weight) = -33.33333
  • Left value 50-16.66666 = 33.33333
  • Right value 200-33.33333 = 166.66667
  • left : right = 1 : 5