將柔性流動設置爲色譜柱包裝時的柔性容器寬度

我擁有固定高度的容器和display: flex。我希望通過設置-webkit-flex-flow: column wrap;，讓孩子以列優先的方式躺下。將柔性流動設置爲色譜柱包裝時的柔性容器寬度

誰能給我解釋一下Chrome瀏覽器如何計算產生的div容器（DIV有綠色邊框）的寬度，爲什麼樹葉上的每個紅項目右側這麼大的自由空間。我想要的是讓容器具有適合所有兒童的寬度，而不需要額外的空白空間。
如果這是不可能的純CSS可以提供給我一個替代實現這個？

我使用Chrome v 29.0.1547.76

的代碼複製，它是：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .flex-container { 
     position: fixed; 
     height: 90%; 

     padding: 0; 
     margin: 0; 
     list-style: none; 
     border: 6px solid green; 

     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 

     -webkit-flex-flow: column wrap; 
     justify-content: flex-start 
     align-content: flex-start; 
     align-items: flex-start 
    } 


    /** Just to show the elements */ 
    body { 
     margin: 0; 
     padding: 0; 
    } 
    .flex-item { 
     background: tomato; 
     padding: 5px; 
     width: 100px; 
     height: 100px; 
     margin-top: 10px; 

     line-height: 150px; 
     color: white; 
     font-weight: bold; 
     font-size: 3em; 
     text-align: center; 
    } 
    </style> 
</head> 
<body> 
    <ul class="flex-container"> 
     <li class="flex-item">1</li> 
     <li class="flex-item">2</li> 
     <li class="flex-item">3</li> 
     <li class="flex-item">4</li> 
     <li class="flex-item">5</li> 
     <li class="flex-item">6</li> 
    </ul> 
</body>

來源

2013-10-16 Mariusz Jamro

如果更改行和列之間的方向，你會看到，柔性容器的寬度不會改變。這不能用純CSS完成。使用列是次好的事情，但它似乎沒有給你想要的效果。 – cimmanon

這是Chrome和Firefox中的一個錯誤。並仍然存在。 – atilkan

Downvoted - 您應該爲您的問題添加儘可能最少的示例，而不僅僅是小提琴鏈接。所以缺少一個預期的行爲。（我假定你的意圖是使綠色邊框的框寬得足以將所有物品放入盒子中，但儘可能小以緊緊包裹物品）。請注意，當試圖根據寬度/高度約束在該容器中佈置項目時，Flexbox無法更改容器大小。 [請參閱Flexbox佈局]（https://www.w3.org/TR/css-flexbox-1/#layout-algorithm）。一個可能的解決辦法是給容器一個'width：220px'。 –

-1

瀏覽器會自動把div和邊框頂部之間的空間，來解決這個問題，你可以只需使用：

margin-bottom：100％;

這是爲什麼？ margin-bottom：100％重置元素並向上移動項目。你已經試過：

body { 
    margin: 0; 
    padding: 0; 
}

但這並沒有工作，因爲身體sposte的HTML頁面，而不是單一的元素。
完整的代碼將在這裏：

.flex-container { 
 
    position: fixed; 
 
    height: 90%; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    border: 6px solid green; 
 

 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: column wrap; 
 
    justify-content: flex-start 
 
    align-content: flex-start; 
 
    align-items: flex-start 
 
} 
 

 

 
/** Just to show the elements */ 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-bottom: 100%; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
</ul>

來源

2016-05-08 17:27:22 Blazed

這沒有幫助。提問者不明白Flexbox需要一個確定的容器大小來正確地將容器放置在容器中。 Flexbox無法在容器中佈置項目並同時調整容器本身。 –

將柔性流動設置爲色譜柱包裝時的柔性容器寬度

回答

相關問題