我正在学习 ccs, js, html 并且我尝试制作一个有趣的小游戏，当您尝试使用“order:”属性单击时，一个按钮会从您身边消失，但由于某种原因它无法正常工作
我的html：
<!DOCTYPE html>
<html>
<head>
<title>Click me</title>
<meta charset="UTF-8">
<link rel = "stylesheet" href="../Annyoing click me app/index.css">
</head>
<body>
<div>Don't click me</div>
<div>Don't click me</div>
<div id = "click-me">Click me</div>
<div>Don't click me</div>
<div>Don't click me</div>
<script src = "../Annyoing click me app/index.js"></script>
</body>
</html>我的 CSS
html, body {height: 100%; overflow: hidden;}
body {
background-color: black;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
div {
width: 15%;
height: 80px;
margin: 20px;
background-color: red;
border: 6px solid darkred;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
#click-me {
background-color: green;
border: 6px solid darkgreen;
order: 4;
}由于某种原因，绿色按钮总是出现在行尾
回答1
默认情况下，所有 flex-children 都有 order: 0。如果你想让 #click-me 元素作为第一个元素，你可以使用 order: -1，这样它就永远是第一个元素。如果您希望它动态工作，您还必须在其他元素上指定 order。
body {
height: 100%;
overflow: hidden;
}
body {
background-color: black;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
div {
width: 15%;
height: 80px;
margin: 20px;
background-color: red;
border: 6px solid darkred;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
#click-me {
background-color: green;
border: 6px solid darkgreen;
/* Always the first item */
/*order: -1;*/
order: 4;
}
div:first-of-type {
order: 1;
}
div:nth-of-type(2) {
order: 2;
}
div:nth-of-type(4) {
order: 4;
}
div:nth-of-type(5) {
order: 3;
}<body>
<div>Don't click me</div>
<div>Don't click me</div>
<div id="click-me">Click me</div>
<div>Don't click me</div>
<div>Don't click me</div>
</body>