Kreativní řešení: Jak změnit pořadí elementů bez zásahu do struktury HTML a použití flexboxu
Běžně se stává, že potřebujeme zobrazit na stránce odlišné pořadí elementů oproti tomu stávajícímu v HTML struktuře. Nebo se může lišit zobrazení elementů na desktopové a mobilní verzi. Tento problém řešil také náš junior kodér, který vymyslel hodně specifické řešení, které dokonce nepoužívá ani flexbox. Jedná se o otočení pořadí elementů za pomoci vlastnosti transform: rotate. Takové řešení se nedá využít vždy, ale v našem případě (otočení pořadí elementů v patičce) posloužilo velmi dobře.
Snímek obrazovky 2017-01-02 v 16.32.28
Jednoduché obrácení pořadí elementů provedeme následovně, důležité je mít správnou strukturu HTML:
<div class="container">
<div class="element1">Element1</div>
<div class="element2">Element2</div>
<div class="element3">Element3</div>
</div>
Stylopis je také jednoduchý. Nejprve definujeme vlastnosti containeru. Deklarace transform: rotate(180deg) nám zajistí otočení celého containeru o 180 °, který je nyní vzhůru nohama. Floatem si pak vrátíme prvek zpátky na levou stranu stránky.
container {
transform: rotate(180deg);
float: left;
}
Poté jednotlivým elementům uvnitř containeru deklarujeme opět otočení o 180 °, tudíž již nebudou vzhůru nohama, ale v opačném pořadí než na začátku.
.element1,
.element2,
.element3 {
transform: rotate(180deg);
}
Popsané řešení jsme aplikovali v rámci našeho projektu Lemur centrum.
