css Flex Box空白问题(右侧)

laawzig2 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(190)

我遇到了一些问题，使这个Flex框跨越100%的页面宽度。
https://jsfiddle.net/yfhbuwc3/
<html></html>
右边是空白（我不知道它是从哪里来的）
我试过将容器的宽度设为100%，我试过将其设置为calc（100% + Xpx），但这并不正确地计算间距，并使右下角的框在较小的屏幕上切断了页面。

css

来源：https://stackoverflow.com/questions/76516447/flex-box-whitespace-issue-right-side

3条答案

按热度按时间

mkshixfv1#

因为您在.top-row上设置flex-basis: 48%;，这意味着每个.top-row只占用屏幕的48%。因为你想让它们占据整个屏幕，所以将100/2 = 50%设置为50%。
对于.bottom-row，您将其设置为flex-basis: 32%;，因此将100/3 = 33.3333333333%设置为flex-basis，因此将flex-basis设置为33.3333333333%。

#grid-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.top-row {
    flex-basis: 50%;
    height: 300px;
}

.bottom-row {
    flex-basis: 33.3333333333%;
    height: 300px;
    vertical-align: top;
}

#top-left {
    background-color: pink;
}

#top-right {
    background-color: red;
}

#bottom-left {
    background-color: orange;
}

#bottom-center {
    background-color: lightblue;
}

#bottom-right {
    background-color: purple;
}

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="grid-container">
            <div class="top-row" id="top-left"></div>
            <div class="top-row" id="top-right"></div>

            <div class="bottom-row" id="bottom-left"></div>
            <div class="bottom-row" id="bottom-center"></div>
            <div class="bottom-row" id="bottom-right"></div>
        </div>
    </body>
</html>

我建议学习更多关于Flexbox的一般知识。

赞(0）回复(0）举报 2023-06-25

smdnsysy2#

你的CSS样式似乎不完整。使用flex-basis时，还应该定义flex-grow和/或flex-shrink。这些属性定义了元素基于其弹性基础的行为方式。
请这样尝试：

.top-row {
    flex-basis: 48%;
    flex-grow: 1;
    height: 300px;
}

.bottom-row {
    flex-basis: 32%;
    flex-grow: 1;
    height: 300px;
    vertical-align: top;
}

赞(0）回复(0）举报 2023-06-25

r6vfmomb3#

只是需要设置margin属性。在你的css中添加下面的代码。

*{
      box-sizing:0px;
      margin:0px;
      padding:0px;
    }

赞(0）回复(0）举报 2023-06-25

我来回答

css Flex Box空白问题(右侧)

3条答案

相关问题

热门标签

最新问答