Exploring the use of display: flex and order:, I noticed a curious behavior. When I set the order for my first div to 0 (order: 0;), it appears at the top of the page. However, as I add more divs with different orders, they initially show up in unexpected positions on the page. Strangely enough, the elements gradually correct themselves and align correctly as I continue adding more divs to the order property.
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
height: 100px;
text-align: center;
}
.lime {
width: 100%;
order: 0;
background-color: lime;
}
.red {
width: 50%;
order: 1;
background-color: red;
}
.orange {
width: 50%;
order: 2;
background-color: orange;
}
.teal {
width: 100%;
order: 3;
background-color: teal;
}
.light_blue {
width: 20%;
order: 4;
background-color: lightblue;
}
.dark_blue {
width: 60%;
order: 5;
background-color: darkblue;
}
.green {
width: 20%;
order: 6;
background-color: green;
}<body>
<div class="container">
<div class="box lime"></div>
<div class="box dark_blue"></div>
<div class="box light_blue"></div>
<div class="box green"></div>
<div class="box red"></div>
<div class="box orange"></div>
<div class="box teal"></div>
</div>
</body>I am left wondering why this behavior occurs and why everything falls into place only after including the final
.green {width: 20%; order: 6; background-color: green;}