CSS3 FlexBox elrendezés

A flexbox-os elrendezés nagy mértékben megkönnyíti a responsive weblapok készítését.

A flex-direction tulajdonság segítségével a flex konténerben a gyermek elemek sorban, oszlopban, megfordított sorban, vagy megfordított oszlopban rendezhetők el.

A flex-wrap tulajdonság segítségével engedélyezhetjük a sortörést/oszloptörést. Túllógás helyett így az egysoros/egyoszlopos elrendezés helyett többsoros/többoszlopos elrendezés jön létre.

A flex-flow összevont tulajdonság. A flex-direction és a flex-wrap tulajdonságok adhatók meg segítségével egy lépésben.

A justify-content tulajdonság segítségével a flex konténerben a gyermek elemek vízszintesen igazíthatók.

A align-items tulajdonság segítségével a flex konténerben a gyermek elemek függőlegesen igazíthatók.

A order tulajdonság segítségével módosíthatjuk a gyermekelemek megjelenítésének sorrendjét.

A gyermekelemek közötti távolságot a baloldali külső margóval állítjuk be. Az első elem margójának elrejtését flex konténer baloldali külső margójának -5px-re állításával valósítjuk meg.

A flex-grow tulajdonság segítségével módosíthatjuk, hogy a kijelzőméret növekedésekor az egyes elemek a többihez viszonyítva milyen mértékben nyúljanak meg.

A flex-shrink tulajdonság segítségével módosíthatjuk, hogy a kijelzőméret csökkenésekor az egyes elemek a többihez viszonyítva milyen mértékben zsugorodjanak.

A flex-basis tulajdonság segítségével a gyermekelem hosszának referenciaértéke adható meg.

A align-content tulajdonság segítségével a több soros megjelenítésnél beállíthatjuk, hogy a sorok függőlegesen hogyan helyezkednek el egymáshoz képest.

A flex összevont tulajdonság. A flex-grow, flex-shrink és flex-basis tulajdonságok adhatók meg segítségével egy lépésben

A body-n belül egy flex konténert helyezünk el, amelybe 3 gyermekelem kerül (header, main és footer).

Az egyoszlopos elrendezés középső elemét egy flex konténerre cseréljük, amelybe 2 gyermekelem kerül (nav és main).