Issue
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
My 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
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
Solution
All flex-children have order: 0 by default. 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. If you want it to work dynamically, you're gonna have to specify order on the other elements as well.
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>Answered By - Sigurd Mazanti
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.