时间戳

首页 > 解决方案 > Flexbox 项目超出其容器

css - Flexbox 项目超出其容器

问题描述

我正在尝试使用 HTML CSS 和 JS 为大学项目重新创建数学游戏。在布局期间，我的 flexbox 项目超出了它们的容器。我给了他们一个粗边框，这样更容易看到发生了什么。我正在尝试首先为移动设备设计它，如下图所示。

在此处查看屏幕截图

    .container {
    display: flex;
    flex: 1;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    margin: 1em;
    border-width: 5px;
    border-style: solid;
    border-color: red;
}


.flex-item {
    align-items: center;
    justify-content: center;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(0, 255, 64);
}

这是codepen中的完整代码

我做错了什么？

标签： cssflexbox

解决方案

在.container我将边距更改为填充时，问题得到了解决。

推荐阅读