How do I order css flexbox items?
-
Using the code from a previous article: How do I justify content in a column when using flexbox?
The demo code is below.
HTML.
... <div class="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> </div> ...
CSS.
.container { height: 500px; margin-top: 50px; padding: 20px 0; background-color: brown; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center; } .item { width: 50px; padding: 10px; background-color: burlywood; text-align: center; font-size: 30px; }
The result is:
To change the order, add the CSS code for
item-1
as follows: The default isorder: 0
and the order is based on the flex direction.... item-1 { order: 1 } ...
The higher values items are placed behind the other items and using negative values items are placed in front.
... .item-1 { order: 2; } .item-5 { order: -3; } ...
Item 5 is no placed in front.
© Lightnetics 2024