Question

我遇到了包含多个按钮元素的div的CSS问题。我想要以flex样式显示的项目，我已经设法做到了。问题是当我将窗口调整到一个很薄的宽度时：一些按钮在窗口左边丢失（即第一个可见按钮变为第二个，第三个，而不是第一个），而我可以定期使用溢出滚动条向右滚动。这是代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

请您解释一下为什么会这样，我该如何解决？非常感谢你！

注意：我认为问题在stackoverflow中运行代码并不明显，在jsfiddle中运行并缩小输出窗口以查看它。

Answer 1

尝试更改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>

隐藏在flexbox中溢出的元素

1 个答案: