Z pomocą właściwości “order” możemy dowolnie zmieniać kolejność wyświetlania elementów HTML. Chodzi np. elementy <div> pełniące rolę kontenerów spinających fragmenty kodu. Właściwość dodajemy więc na konkretnym elemencie, który chcemy przemieścić.
Dzięki temu możemy przemieszczać, tasować między sobą elementy tak by pasowały np. kiedy chcemy by na jednym urządzeniu coś było w jednym miejscu a na drugim w innym. Nie jesteśmy więc ograniczeni położeniem elementu w kodzie strony.
W przykładzie elementy są ponumerowane – warto na to zwrócić uwagę ponieważ dzięki temu widać gdzie przemieścił się konkretny element. Poniżej macie kod HTML dla 3 przykładu (elementy w CSS mają takie same ustawienia jak wcześniej) myślę, że lepiej pozwoli wam to zwizualizować miejsce gdzie umieszczamy właściwość order:
Kod HTML:
<div class="flex-container">
<div style="order:3;">1 kol</div>
<div style="order:4;">2 kol</div>
<div style="order:1;">3 kol</div>
<div style="order:2;">4 kol</div>
</div>Kod CSS
.conteiner{
max-width: 800px;
margin: 0 auto;
padding:15px;
}
/* container */
.flex-container {
display: flex;
background-color: darkblue;
margin-bottom: 15px;
}
/* element */
.flex-container div {
background-color: #ccc;
margin: 10px;
padding:20px;
font-size: 30px;
}