When I resize the screen the circles are not wrapping, even with flex-wrap: wrap.
Also justify-content: space-evenly is not working.
.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>>Solution :
You have given width: 850px; to .game-canvas.
So this element is taking 850px width and is not affected by screen size or screen resize.
A better approach can be using screen dependant width(instead of absolute width).
I modified one line in your original snippet, added width: 80vw; and it is working now.
Hope it helped.
.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>