| Autor | Zpráva | ||
|---|---|---|---|
| Taddy Mason Profil |
#1 · Zasláno: 10. 3. 2018, 18:54:06
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 |
#2 · Zasláno: 10. 3. 2018, 19:50:50
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 |
#3 · Zasláno: 10. 3. 2018, 22:43:15
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 |
#4 · Zasláno: 11. 3. 2018, 10:15:07
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 |
#5 · Zasláno: 11. 3. 2018, 12:15:57
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 |
#7 · Zasláno: 13. 3. 2018, 09:14:43
Keeehi:
Lepší definice. |
||
|
Časová prodleva: 6 let
|
|||
0