Flex 换行并证明内容不起作用

Question

当我调整屏幕大小时，即使 flex-wrap: wrap.
，圆圈也没有换行另外 justify-content: space-evenly 不工作。

.game-canvas {
    height: 450px;
    width: 850px;
    border: 2px solid black;
}
.tree-row {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.base-tree {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.base-tree:nth-child(1) {
    background: green;
}
.base-tree:nth-child(2) {
    background: blue;
}
.base-tree:nth-child(3) {
    background: black;
}
.item {
    height: 50px;
    background: wheat;
    width: 50px;
    border-radius: 50%;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tree game</title>
        <link rel="stylesheet" href="main1.css" />
    </head>

    <body>
        <div class="container">
            <div id="game" class="canvas-container">
                <div id="game-canvas" class="game-canvas">
                    <div class="tree-row" id="tree-row">
                        <div class="base-tree">
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                        </div>
                        <div class="base-tree">
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                        </div>
                        <div class="base-tree">
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

Answer 1

您需要定义宽度才能使 flex-wrap 正常工作。

向 class“base-tree”添加 300px 宽度并检查。此外，您可能希望从此 class 中删除 justify-content，因为如果任何一行的填充行数较少，它将被分隔开一个巨大的间隙。

证明：

Answer 2

您已将 width: 850px; 给 .game-canvas。所以此元素的宽度为 850px，不受屏幕尺寸或屏幕调整大小的影响。

更好的方法是使用屏幕相关宽度（而不是绝对宽度）。我修改了您原始代码段中的一行，添加了 width: 80vw;，现在可以正常使用了。希望对你有帮助。

.game-canvas {
    height: 450px;
    width: 80vw;
    border: 2px solid black;
}
.tree-row {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.base-tree {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.base-tree:nth-child(1) {
    background: green;
}
.base-tree:nth-child(2) {
    background: blue;
}
.base-tree:nth-child(3) {
    background: black;
}
.item {
    height: 50px;
    background: wheat;
    width: 50px;
    border-radius: 50%;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tree game</title>
        <link rel="stylesheet" href="main1.css" />
    </head>

    <body>
        <div class="container">
            <div id="game" class="canvas-container">
                <div id="game-canvas" class="game-canvas">
                    <div class="tree-row" id="tree-row">
                        <div class="base-tree">
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                        </div>
                        <div class="base-tree">
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                        </div>
                        <div class="base-tree">
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

Flex 换行并证明内容不起作用

Flex wrap and justify content not working

html

css

flexbox