CSS order 属性在我的项目中不起作用

Question

I am learning ccs, js, html and I tried to make a fun little game in which a button runs away from you when you try to click in using the "order: " property but for some reason it doesn't work properly我正在学习 ccs、js、html，我尝试制作一个有趣的小游戏，当您尝试使用“order:”属性单击时，一个按钮会远离您，但由于某种原因它无法正常工作

My html:我的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>

My CSS我的 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;
}

for some reason the green button always appears at the end of the row由于某种原因，绿色按钮总是出现在行尾

Answer 1

All flex -children have order: 0 by default.默认情况下，所有flex -children 的order: 0 。 If you want to have the #click-me -element as the first element, you can use order: -1 , that way it will always be the first element.如果你想让#click-me -element 作为第一个元素，你可以使用order: -1 ，这样它就永远是第一个元素。 If you want it to work dynamically, you're gonna have to specify order on the other elements as well.如果您希望它动态工作，您还必须指定其他元素的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>

CSS order 属性在我的项目中不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-05-18 19:55:27

CSS order 属性在我的项目中不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-05-18 19:55:27

解决方案1
0 已采纳 2022-05-18 19:55:27