Why do flexible items wrap instead of shrink?

Question

I wonder if anyone can give me a simple introduction on how the flexbox layout is computed, especially in the order where the priority is, for example:

    <div id="container" style="display: flex; flex-direction: row; flex-wrap:wrap;">
    <div style="flex: 1 0 200px; height:200px; background-color: lightgreen;"></div>
    <div style="flex: 1 1 400px; height:200px; background-color: lightyellow;"></div>
    <div style="flex: 1 0 200px; height:200px; background-color: lightblue;"></div>
</div>

Run code

I am wondering if I make the width of the container less than 600 pixels; the wrapper will take effect first before shrinking (I set the second yellow block on flex: 1 1 400px;), which will turn into 3 rows, then the compression effect will decrease until the container reaches 200 pixels;

I wonder what order / rule is it decided to choose a flexbox layout? Why is it not just shrinking from 400 blocks?

And even I also installed all three blocks in flex: 1 1 their basis size;, the wrapper is still happening first.

thank

Answer 1

flex-shrink flex-wrap: nowrap (flex-wrap: nowrap).

, flex- , flex-shrink , ( ). .

(flex-wrap: wrap) , . , , , , , . . , flex-shrink ().

.

• div # 1 ~ flex: 1 0 200px
• div # 2 ~ flex: 1 1 400px
• div # 3 ~ flex: 1 0 200px

800 , .

800px, div # 3 ( , ).

600px ( div # 1 # 2) div # 2 . , .

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div:nth-child(1) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightgreen;
}
div:nth-child(2) {
  flex: 1 1 400px;
  height: 200px;
  background-color: lightyellow;
}
div:nth-child(3) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightblue;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

:

flex-shrink

[ ] , , .

Answer 2

Flex Layout Algorithm :

-, 3 .

, 7, (, ).

, , flex-wrap, , , "", flex-shrink.