当柔性包裹物包裹时,柔性收缩是否有用？

Question

我不会一起思考flex-shrink和flex-wrap:wrap;理解,但我想知道是否有一些我缺少的东西.

.container{
  background: #DDD;
  width: 300px;
  height: 100px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap
}
.tags{
  background: orange;
  box-sizing: border-box;
  flex: 1 3 200px;
}
.redes{
  background: cyan;
  box-sizing: border-box;
  flex: 0 1 200px;
}
.wrap{
  flex-wrap: wrap;  
}

<div class="container">
  <div class="tags">box1</div>
  <div class="redes">box2</div>
</div>
<div class="container wrap">
  <div class="tags">box1</div>
  <div class="redes">box2</div>
</div>

据我所知,当flex-wrap设置为nowrap时,负空间将使用值进行分配flex-shrink.同时,如果flex-wrap设置为包裹,则不会有任何负面空间,可以吗？因此这个属性是没用的,或者至少我可以看到任何效果.这是正确的吗？

Answer 1

同时,如果将flex-wrap设置为wrap,则不会有任何负空间,可以吗？

如果元素比flex容器宽,则它不能包裹多行,但它可以缩小.

因此这个属性是没用的,或者至少我可以看到任何效果.这是正确的吗？

不,你会看到当flex项目溢出其父容器时的效果.

.box {
  background-color: pink;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wide {
  background-color: lightgreen;
  flex: 0 0 auto;
  margin: 10px 0;
  width: 150%;
}

.shrink {
  background-color: lightblue;
  flex-shrink: 1;
}

<div class="box">
  <div class="wide shrink">
    Wide, shrinks
  </div>
  <div class="wide">
    Wide, won't shrink
  </div>
</div>