CSS3 Flexbox

CSS3 Flexbox

használata

A Flexbox vagy más néven "Flexible boxes" egy új elrendezési technika a CSS3-ban. Segítségével könnyeben és gyorsabban lehet kialakítani egy mai modern weboldalt, igazodva a különböző megjelenítő eszközök eltérő felbontásaihoz. Használata mellett elbúcsúzhatunk a jól megszokott float attribútum használatától.

Egy lista a használható attribútumokról és azok lehetséges értékeiről:

• display: meghatározza, hogy milyen stílusú lesz a doboz. Ez jelen esetben: flex!
• flex-direction: a dobozban lévő elemek elrendezési iránya, alapértelmezett row, vagy sorba rendezett, de lehet fordítva is: row-reverse. Amennyiben függőleges irányt, elhelyezkedést szeretnénk, akkor: column, vagy ugyanaz fordítva: column-reverse.
• justify-content: vízszintesen igazítja a flex doboz elemeit, ha nem használják a teljes helyet. Értékei lehetnek: flex-start vagy flex-end: előbbi alapértelmezetten balra zárja az elemeket az utóbbi pedig jobbra. Létezik a center is, ami középre igazítja, a space-between kitölti a rendelkezésre álló helyet és elkülöníti az elemeket egyenlő távolságokra, épp úgy, mint a space-around, csak ez utóbbi előtte is és utána is hagy helyet.
• align-items: a flex dobozon belüli elemeket igazítja függőlegesen, ha azok nem töltik ki teljesen. Alapértelmezetten stretch, vagyis teljesen kitölti, igazodik a doboz magasságához. A flex-start beállításával a doboz tetejére helyezi az elemeket, míg a flex-end-del a doboz aljára. Az utolsó a baseline: addig tart, amíg a szöveg.
• flex-wrap: a flex doboz elemeinek tagoltsága alapértelmezetten nowrap, vagyis ha például egymás után van több elem, és nem fér ki egymás mellé, nem töri új sorba. Ezzel szemben, ha wrap értéket adjuk neki, akkor széttöri. Visszafelé is működik a wrap-reverse értékkel.
• align-content: módosítja a flex-wrap tulajdonságait. Alapértelmezetten stretch, de lehet center, flex-start, flex-end, space-between és space-around.
• flex-flow: rövidített flex-direction és flex-wrap
• order: a flex konténer elemeinek a sorrendjét lehet vele szabályozni. Egy számot vár, alapértelmezetten 0.
• align-self: használható a konténer elemeire és felülírja a dobozra beállított tulajdonságokat. Alapértelmezetten örökli a konténer beállításait, de ez módosítható.
• flex: megadható a dobozon belüli szélesség a többi elem arányaihoz képest.