如何確保Flex項目受其子項寬度的影響？

我有以下的柔性和它的孩子（IMG）：如何確保Flex項目受其子項寬度的影響？

<div class="flex"> 
    <img> 
</div> 

.flex { 
    position: relative 
    -webkit-box-pack: center!important 
    display: flex!important 
    box-sizing: inherit 
} 

img { 
    max-height: 124px 
    height: 100% 
    vertical-align: middle 
    box-sizing: inherit 
}

有時.flex沒有它具有寬......其他時間。

如何確保.flex總是有孩子的寬度？（在這種情況下，圖像？）

來源

2017-08-28 alex

當'.flex'有寬度時圖像應該如何表現？ ...伸展，始終保持寬度/長寬比並在頂部/底部剪裁，...？ ...如果您可以提供2個樣本，顯示「.flex」有沒有寬度，並且每種情況下都需要輸出 – LGSon

請回顧並評論任何答案，並在有問題時不清楚或丟失。如果不是，那麼如果你能接受最能幫助你的答案，那將是非常好的。 – LGSon

@LGSon嗯，它沒有'最後的工作。寬度仍然不時消失。哈。 – alex

由於fit-content，哪一個作爲父母width，缺少合理的瀏覽器支持，使用inline-flex。

.flex { 
 
    display: inline-flex; 
 
    box-sizing: inherit; 
 
    border: 1px dotted blue; 
 
    align-items: center;   /* vert. align img */ 
 
} 
 

 
.flex img { 
 
    display: block; 
 
    max-height: 124px; 
 
    height: 100%; 
 
    box-sizing: inherit; 
 
}

<div class="flex"> 
 
    <img src="http://placehold.it/500x350/"> 
 
</div> 
 

 
<div class="flex"> 
 
    <img src="http://placehold.it/500x50/"> 
 
</div>

注意，因爲瀏覽器之間不一致的，一個img作爲柔性項目可能呈現不同和包裝正常修復。

來源

2017-08-28 06:24:45 LGSon

你在找什麼是應用width: fit-content到flex元素。

如果沒有這個，下面例子中的.flex將伸展到容器的邊緣。
有了這個，.flex只有綿延一樣寬，其中所包含的內容（在這種情況下，圖像）：

.flex { 
 
    display: flex; 
 
    border: 1px solid red; 
 
    width: fit-content; 
 
}

<div class="flex"> 
 
    <img src="http://placehold.it/100"> 
 
</div>

希望這有助於！ :)

來源

2017-08-28 03:51:42

如何確保Flex項目受其子項寬度的影響？

回答

相關問題