Vizualizujte flex kontejner a položky pro jasné zobrazení, jak se podřízené prvky umisťují v rámci flex kontejneru
Upravte vlastnosti flexboxu pro pozorování různých efektů zarovnání a distribuce
Směr flex položek
Zarovnání položek podél příčné osy
Zarovnání a distribuce podél hlavní osy
Zda se položky zalamují na nové řádky
Zarovnání zalomených řádků podél příčné osy
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchFlex kontejner s položkami různých velikostí pro demonstraci efektů zarovnání flexboxu
row - Položky proudí horizontálně (zleva doprava)row-reverse - Položky proudí horizontálně (zprava doleva)column - Položky proudí vertikálně (shora dolů)column-reverse - Položky proudí vertikálně (zdola nahoru)nowrap - Položky zůstávají na jednom řádkuwrap - Položky se zalamují na nové řádky podle potřebywrap-reverse - Položky se zalamují na nové řádky v opačném pořadíflex-start - Zarovnat položky na začátek příčné osycenter - Vycentrovat položky na příčné oseflex-end - Zarovnat položky na konec příčné osystretch - Roztáhnout položky pro vyplnění příčné osybaseline - Zarovnat položky podél jejich základní linieflex-start - Sbalit položky na začátek hlavní osycenter - Vycentrovat položky na hlavní oseflex-end - Sbalit položky na konec hlavní osyspace-* - Distribuovat prostor mezi položky