Autor Zpráva
Taddy Mason
Profil
Zdravím, narazil som na videotutoriál pre jednoduchú flexbox galériu a všetko funguje bez problémov, no snažím sa pochopiť ako to funguje a nedokážem pochopiť pár vecí:

- Prečo keď sa obrázky pri zmene veľkosti okná zmenšujú, tak sa nezmenšujú stál, tak aby ostali v jednom riadku? Chápem, že tam máme flex-wrap: wrap, ale keď už sa zmenšujú, tak by sa nemali zmenšovať stále?

-Prečo keď už nastane wrap, tak niesú všetky obrázky rovnako veľké, ale ten ktorý sa zalomil, tak vypĺňa všetko miesto, hoci je nastavený width divu 250px a veľkosť sa aj tak zväčší?
Kcko
Profil
Taddy Mason:
Místo width: 200px nastav flex: 0 1 200px; a nastuduj si něco o tom co se pod touto vlastností skrývá (shrink, grow, basis).
Taddy Mason
Profil
Tak niečo viac som si naštudoval chcem sa uistiť či to chápem dobre. Vďaka vlastnosti flex-grow: 1 sú vlastne všetky elementy rovnako veľké a podľa veľkosti okna sa tomu prispôsobujú až kým nenarazia na flex-basis čo je v mojom prípade 200px, vtedy sa element ktorý sa nezmestí zalomí a tiež vyplní miesto podľa flex-grow: 1 a prvé elementy sa znova budú rovnomerne zmenšovať až po 200px.

A čo sa týka druhej otázky, tak to vlastne súvisí s tým že flex-grow vypĺňa všetko voľné miesto. A v mojom prípade sa vlastne width chovalo ako flex-basis.
Kcko
Profil
flex-grow dělá to, že se snaží nastavit všechny elementy na stejnou šířku, pokud je dostatek místa.
flex-shrink dělá defakto opak
flex-basis nastavuje šířku (width vůbec nepoužívej s použítím flexu).

Takže to co si měl znamenalo, že když Ti ty boxy vyjdou tak, že se poslední už nevejde, tak skočí na nový řádek a díky flex-growu se roztáhlo na 100%.

Zkoukni si tenhle skvělý videotutorial flexbox.io a nebudeš mít pak už asi žádné dotazy, protože tam je všechno moc hezky vysvětleno + praktická cvičení, lepší tutoriál neznám.
Taddy Mason
Profil
Kcko:
Idem nato, ďakujem za odpoveď, aj ďalší zdroj na učenie.
Keeehi
Profil
Kcko:
flex-grow dělá to, že se snaží nastavit všechny elementy na stejnou šířku, pokud je dostatek místa.
Zvětšují se v poměru zadaných hodnot. Pokud mají všechny elementy nastavenou stejnou hodnotu, pak se zbylé místo rozdělí mezi elementy rovnoměrně => každý poporoste o stejný kus. Aby tedy měly všechny elementy stejnou šířku, musejí mít nastavený stejný basis a grow.
Kcko
Profil
Keeehi:
Lepší definice.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: