包裹flex-wrap时，flex-shrink有什么用吗？ [英] Is there any use for flex-shrink when flex-wrap is wrap?

问题描述

我不认为 flex-shrink 和 flex-wrap：wrap; 在一起有意义，但我想知道

I don't think flex-shrink and flex-wrap:wrap; make sense together but I wonder if there is something I'm missing.

.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-上的值进行分配缩小。同时，如果将 flex-wrap 设置为自动换行，就不会有任何负空格，对吗？因此，此属性只是无用的，或者至少我可以看到任何效果。

I understand that when, flex-wrap is set to nowrap, the negative space gets distributed using the values on flex-shrink. Meanwhile, if flex-wrap is set to wrap, there can't be any negative space, can it? Therefor this property is just useless, or at least I can see any effect. Is this right?

推荐答案

同时，如果将flex-wrap设置为wrap，可以

Meanwhile, if flex-wrap is set to wrap, there can't be any negative space, can it?

如果元素的宽度大于 flex 容器，它不能跨越多行，但它可以 缩小。

If an element is wider than the flex container, it can't wrap across multiple lines, but it can shrink.

为此属性只是没有用，或者至少我可以看到任何效果。是吗？

Therefor this property is just useless, or at least I can see any effect. Is this right?

不是，您会看到弹性项目否则会溢出其父容器的效果。

Nope, you'll see the effect when a flex item would otherwise overflow its parent container.

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

这篇关于包裹flex-wrap时，flex-shrink有什么用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！