在flexbox中隱藏溢出的元素

我遇到了包含幾個按鈕元素的div的CSS問題。我想用flex樣式顯示項目，並且我已經設法做到了。問題是當我調整窗口的寬度時：窗口左側的一些按鈕會丟失（即第一個可見按鈕變成第二，第三或第三個，而不是第一個），而我可以定期使用溢出滾動條滾動到右側。下面是代碼：在flexbox中隱藏溢出的元素

#toolbar{ 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #111111; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
    overflow: auto; 
 
} 
 

 
.roundbutton{ 
 
    margin-top: 4px; 
 
    margin-bottom: 4px; 
 
    margin-left: 25px; 
 
    margin-right: 25px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 15px; 
 
    background-color: #77fcff; 
 
}

<div id="toolbar"> 
 
    <button type="button" class="roundbutton" id="aaa"></button> 
 
    <button type="button" class="roundbutton" id="bbb"></button> 
 
    <button type="button" class="roundbutton" id="ccc"></button> 
 
    <button type="button" class="roundbutton" id="ddd"></button> 
 
    <button type="button" class="roundbutton" id="eee"></button> 
 
    <button type="button" class="roundbutton" id="fff"></button> 
 
    <button type="button" class="roundbutton" id="ggg"></button> 
 
    <button type="button" class="roundbutton" id="hhh"></button> 
 
</div>

能否請你解釋一下我爲什麼發生這種情況，我該如何解決？非常感謝！

注意：我認爲問題並不明顯，在stackoverflow中運行代碼，在jsfiddle中運行它並縮小輸出窗口以查看它。

來源

2017-04-25 leoll2

應該發生什麼時，他們不適合了嗎？ – LGSon

@ leoll2如果您在dupe鏈接找不到答案，請告訴我，我重新打開此問題併發布答案。 – LGSon

@LGSon我喜歡這個答案，即使有一些限制（例如多線柔性盒），它也可以工作。通常CSS非常棘手和違反直覺，網絡開發人員的生活必須苛刻。 Ty再次。 – leoll2

嘗試改變flex-direction財產和flex-wrap屬性更改爲nowrap這樣的：

#toolbar{ 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #111111; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
    overflow: auto; 
 
} 
 

 
.roundbutton{ 
 
    margin-top: 4px; 
 
    margin-bottom: 4px; 
 
    margin-left: 25px; 
 
    margin-right: 25px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 15px; 
 
    background-color: #77fcff; 
 
}

<div id="toolbar"> 
 
    <button type="button" class="roundbutton" id="aaa"></button> 
 
    <button type="button" class="roundbutton" id="bbb"></button> 
 
    <button type="button" class="roundbutton" id="ccc"></button> 
 
    <button type="button" class="roundbutton" id="ddd"></button> 
 
    <button type="button" class="roundbutton" id="eee"></button> 
 
    <button type="button" class="roundbutton" id="fff"></button> 
 
    <button type="button" class="roundbutton" id="ggg"></button> 
 
    <button type="button" class="roundbutton" id="hhh"></button> 
 
</div>

來源

2017-04-25 09:09:54

問題仍然存在，此解決方案也會導致按鈕變薄。 – leoll2

在flexbox中隱藏溢出的元素

回答

相關問題