在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中隐藏溢出的元素

回答

相关问题