柔性包裝包裝時是否有任何用於柔性收縮的用途？

我不認爲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設置爲換行，則不能有任何負面空間，可以嗎？因此，這個屬性是無用的，或者至少我可以看到任何效果。這是正確的嗎？

來源

2016-04-26 Vandervals

什麼，沒有使用過** **？我不確定你的意思是什麼？ –

我的觀點是：當'flex-wrap'是'wrap'時，不同的flex-shrink值會有什麼影響嗎？ – Vandervals

是的，但這是一個太寬泛的問題。每種情況都會有不同的依賴結構等。嘿，如果你不想使用它，不要，只需使用默認選項並等待。也許你永遠不會需要它......誰知道。 –

同時，如果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>

來源

2016-04-26 14:54:32 zzzzBov

*如果一個元素比flex容器更寬，它不能包裝，但它可以收縮。*顯然，比flex容器更寬的項目*可以*包裝並且*可以*縮小。擴大你的答案有點：https：//jsfiddle.net/yh2sgwjy/3/ ...不過，你突出了OP的理論的例外，所以你有我的+1 :-) –

@Michael_B，我的意思是「無法換行」是因爲元素本身不能跨行分割。我必須更新我的答案中的措辭，以便更清楚地說明問題。 – zzzzBov

柔性包裝包裝時是否有任何用於柔性收縮的用途？

回答

相關問題