EN
CSS - change flex items order (flexbox order)
0 points
In this article, we would like to show you how to change flex items order in CSS.
Quick solution:
xxxxxxxxxx1
.container {2
display: flex;3
}4
5
.item1 {6
order: 3;7
}8
9
.item2 {10
order: 1;11
}12
13
.item3 {14
order: 2;15
}
In this example, we use flexbox order property to change the order of flex items inside the container.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
background-color: #3085d6;8
height: 200px;9
width: 200px;10
border-radius: 10px;11
12
display: flex; /* <----- required */13
}14
15
.item1 {16
height: 50px;17
width: 50px;18
margin: 2px;19
background-color: rgb(255, 195, 83);20
border-radius: 5px;21
text-align: center;22
line-height: 50px;23
24
order: 3; /* <----- required */25
}26
27
.item2 {28
height: 50px;29
width: 50px;30
margin: 2px;31
background-color: rgb(146, 255, 83);32
border-radius: 5px;33
text-align: center;34
line-height: 50px;35
36
order: 1; /* <----- required */37
}38
39
.item3 {40
height: 50px;41
width: 50px;42
margin: 2px;43
background-color: rgb(221, 83, 255);44
border-radius: 5px;45
text-align: center;46
line-height: 50px;47
48
order: 2; /* <----- required */49
}50
51
</style>52
</head>53
<body>54
<div class="container">55
<div class="item1">1</div>56
<div class="item2">2</div>57
<div class="item3">3</div>58
</div>59
</body>60
</html>