html - Why do flex items wrap instead of shrink? -

i wonder if give me simple intro how flexbox layout gets calculated, in priority order, 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>

i find interesting if make container width smaller 600px; wrap take effect first before shrinking (i set second yellow block flex: 1 1 400px;) turn 3 rows, shrinking take effect until container reach 200px;

i wonder order/rule flexbox layout decided? why not shrink 400 block?

and set 3 blocks flex: 1 1 basis size; wrap still happens first.

thanks

the flex-shrink property comes in handy in single-line flex container (flex-wrap: nowrap).

in other words, when flex items cannot wrap, flex-shrink enable them shrink when container small (the spec calls negative free space). has effect of preventing flex items overflowing container.

however, in multi-line flex container (flex-wrap: wrap) no negative free space created because flex items can create additional lines.

you have row-direction, wrap-enabled flex container 3 flex items.

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

when container greater 800px, items stay on line.

when container breaks below 800px, div #3 wrap (there no need shrink, if could).

at 600px mark (the combined width of divs #1 & #2), div #2 wraps. again, no need shrink.

#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>

from spec:

flex-shrink

[this property] specifies flex shrink factor, determines how flex item shrink relative rest of flex items in flex container when negative free space distributed.