Flexbox with CSS counter
When you use the order property to change the order of elements from the default, does the counter update to reflect this? (Answer: No)
by Richard Hunter
HTML
<div class="container">
<div class="box alpha">alpha</div>
<div class="box beta">beta</div>
<div class="box gamma">gamma</div>
</div>
CSS
.container {
display: flex;
counter-reset: mycounter;
}
.box {
counter-increment: mycounter;
padding: 8px;
background: pink;
margin: 4px;
}
.box:before {
content: counter(mycounter)".";
margin-right: 4px;
}
.alpha {
order: 2;
}
.beta {
order: 3;
}
.gamma {
order: 1;
}