Poravnava elementov z Oxygen

Privzeta poravnava elementov v Oxygen je v navpični usmeritvi, kar pomeni, da se elementi zlagajo drug na drugega. Za spremembo poravnave elementov lahko nastavimo splošno poravnavo na hierarhično najvišjem elementu ali pa poravnamo vsek element posebej.

Poravnava elementov za vse elemente

Postopek poravnav je enak za oba strukturna elementa – Section in Div. Elemente poravnamo tako, da v desnem strukturnem panelu 1) izberemo želeni gradnik znotraj katerega želimo poravnati elemente. V levem delu zaslona izberemo zavihek 2) Advanced in kliknemo zavihek 3) Layout.

V razdelku Display vklopimo ploščico 4) Flex, ki nam nato odpre dodatne nastavitve. V razdelku 5) Flex Direction izberemo želeno usmeritev elementov: Column za navpično/stolpčno usmeritev ali Row za vodoravno/vrstično usmeritev. Če želimo obrniti vrstni red elementov, obkljukamo možnost Reverse.

Elemente lahko nato poravnamo navpično in vodoravno glede na strukturni gradnik, v katerem se nahajajo. Za NAVPIČNO poravnavo v razdelku 6) Align Items izberemo želeno poravnavo: flex-start za poravnavo na vrh gradnika, center za poravnavo na sredino, flex-end za poravnavo na dnu gradnika, stretch za poravnavo glede na največji element (razteg).

Za VODORAVNO poravnavo pa v razdelku 7) Justify Content izberemo želeno poravnavo: flex-start za levo, center za sredino ali flex-end za desno. Za enakomerno razporeditev elementov lahko izberete space-between, ki elemente poravna do roba z enakomernim razmikom med njimi, ali space-around, ki elemente enakomerno poravna na sredino gradnika.

Poravnava individualnega elementa

Če želimo poravnati individualni element, ga najprej izberemo, kliknemo zavihek Advanced in izberemo zavihek Layout (glej prvi del navodil za izbor elementa). Z miško se v levem delu zaslona pomaknemo povsem na dnu nastavitev elementa.

V nastavitvah Flexbox Child Controls izberemo razdelek 8) Align Self in izberemo želeno poravnavo elementa. Podobno kot v prejšnjih korakih, flex-start poravna element na začetek/vrh strukturnega gradnika, center na sredino, flex-end na konec/dno gradnika, stretch pa ga raztegne glede na najvišji element v gradniku.

V kolikor se element ne želi poravnati, preverite, da je na hierarhično najvišjem elementu (op. strukturnem gradniku) vklopljen prikaz Flex!