Question

我不认为flex-shrink和flex-wrap:wrap;有意义，但我想知道是否有一些我不知道的事情。

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

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

Answer 1

同时，如果将柔性包裹设置为包裹，则不能有任何负空间，可以吗？

如果某个元素比flex容器宽，则它不能包裹多行，但可以缩小。

因此这个属性没用，或者至少我可以看到任何效果。这是对的吗？

没有，当Flex项目溢出其父容器时，你会看到效果。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: