爲什麼全寬柔性箱柱擠壓其兄弟姐妹？

當試圖創建一個表格式佈局，其中一個主列應占用所有可用空間時，主列會佔用比所需空間更多的空間，並將其他列拖到容器邊界之外。爲什麼全寬柔性箱柱擠壓其兄弟姐妹？

我正在尋找的行爲就好像我正在使用表格來表示這一點，我給出了一列width: 100%。

如果你看下面的例子，你會發現第一行的第二列被壓扁，即使溢出被隱藏。第一列似乎比其他列表具有某種優先級。

我很好奇爲什麼會發生這種情況，以及可重複使用的解決方案。我不想在任何列上設置固定寬度。

.list { 
 
    border: 1px solid #000; 
 
} 
 

 
.list-row { 
 
    display: flex; 
 
    border: 1px solid #AAA; 
 
} 
 

 
.list-column { 
 
    border: 1px solid blue; 
 
    white-space: nowrap; 
 
} 
 

 
.list-column--main { 
 
    flex-grow: 1; 
 
} 
 

 
.hide-overflow { 
 
    overflow: hidden; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Example</title> 
 
<style type="unprocessed" id="AutoprefixerIn">%css%</style> 
 
<style id="AutoprefixerOut"></style> 
 
<script> 
 
AutoprefixerSettings = ""; //Specify here the browsers you want to target or leave empty 
 
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer(AutoprefixerSettings || null).process(document.getElementById("AutoprefixerIn").innerHTML).css; 
 
</script> 
 
</head> 
 
<body> 
 
    <div class="list"> 
 
    <div class="list-row"> 
 
     <div class="list-column list-column--main hide-overflow"> 
 
     The main column that has a very very very very very very very very very very very very very very very very very very very very very long title 
 
     </div> 
 
     <div class="list-column"> 
 
     <a href="#">Close</a> 
 
     </div> 
 
    </div> 
 
    <div class="list-row"> 
 
     <div class="list-column list-column--main hide-overflow"> 
 
     A shorter title 
 
     </div> 
 
     <div class="list-column"> 
 
     <a href="#">Close</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2014-12-05 James van Dyke

使用flex-shrink屬性，你可以指定哪些列應該收縮更多的時候是東西太寬的箱子。

.list-column { 
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: auto; 
} 
.list-column--main { 
    flex-grow: 1; 
    flex-shrink: 100; 
    flex-basis: 100%; 
}

的list-column--main列是長僅有的一列，但它也是一個日漸僅列。其他欄不會超過其原始尺寸，也不會縮小。

我原本預計從flex-shrink: 1可以正常工作的規格，但實際上，像flex-shrink: 100這樣大得多的東西實際上是我想要的。

更多閱讀（flexbox規格）：http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink

來源

2014-12-05 18:07:33 Akrikos

This Works！我想知道它爲什麼這樣工作，爲什麼'flex-shink：100'可以工作，但'flex-shink：1'不會，如果有人會詳細說明的話。 – 2014-12-08 15:16:56

爲什麼全寬柔性箱柱擠壓其兄弟姐妹？

回答

相關問題