Webspire

Administrační systém

Kreativní řešení: Jak změnit pořadí elementů bez zásahu do struktury HTML a použití flexboxu

Štítky:

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
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);
}

Ukázka v Codepenu

Popsané řešení jsme aplikovali v rámci našeho projektu Lemur centrum.

Sdílet:
###message