| Autor | Zpráva | ||
|---|---|---|---|
| nulovamezera Profil |
Ahoj.
Na mojí stránce mám flexbox. Flexbox se wrapuje a má justify-content: space-around;. To má za následek, že se horizontálně vytvoří mezi divy mezera. To tak chci. Jenže ta samá mezera se nevytvoří vertikálně. Dal jsem tam těm divům margin, ale furt je to nerovnoměrný. Dá se nastavit, aby byla vertikální mezera stejná, jako horizontální? Asi by se to dalo počítat JavaScriptem, ale nebylo by to tak pěkný. Jak to udělám CSSkem?
Ještě obrázek. |
||
| Kcko Profil |
#2 · Zasláno: 29. 4. 2021, 20:07:46
nulovamezera:
Použij grid, tam to řeší vlastnost GAP. |
||
| nulovamezera Profil |
#3 · Zasláno: 29. 4. 2021, 20:47:08
Děkuju, ale já bych rád, aby si to spočítalo ty mezery podle
justify-content. Možná bych to mohl nějak složitě vypočítat pomocí calc() nebo JS, ale nevím jak, aby to bylo nějak rozumně jednoduchý.
|
||
| N71 Profil * |
#4 · Zasláno: 29. 4. 2021, 21:41:01
To celkem nedává smysl, v každém řádku můžou být mezery jinak široké. Podle které hodnoty by se pak měl flex řídit?
Grid je vhodnější – už z toho titulu, že tvoje struktura je dvourozměrná. |
||
| nulovamezera Profil |
#5 · Zasláno: 29. 4. 2021, 22:01:49
N71:
„v každém řádku můžou být mezery jinak široké. Podle které hodnoty by se pak měl flex řídit?“ To je pravda... No v mém případě jsou všechny objekty stejně široké, akorát poslední řádek by mohl být jiný. „Grid je vhodnější“ No dobře, jak udělám, abych tam měl tu vlastnost, jako s justify-content: space-around;? |
||
| nulovamezera Profil |
#6 · Zasláno: 30. 4. 2021, 09:27:31
No a teď tam mám další problém - je tam kód:
<a href="/zaci/kuba.php"> <h3>Kuba</h3> <img src="/zaci/obr/kuba.jpg"> </a> <a href="/zaci/kuba.php"><img src="/zaci/obr/kuba.jpg"></a> |
||
| Kcko Profil |
#7 · Zasláno: 1. 5. 2021, 09:49:55
Mimo: Časem to půjde i ve flexboxu: css-tricks.com/safari-14-1-adds-support-for-flexbox-gaps
PS. nulovamezera pokud chceš něco řešit, připrav živou ukázku. Tím myslím třeba sem Živá ukázka |
||
| nulovamezera Profil |
#8 · Zasláno: 1. 5. 2021, 10:15:37
|
||
| Kcko Profil |
nulovamezera:
Přidej obrázku: display: block; |
||
| nulovamezera Profil |
#10 · Zasláno: 1. 5. 2021, 10:43:58
Ono to funguje! Děkuju. Teď akorát: proč?
|
||
| Kcko Profil |
Btw když si upravíš ten grid takto:
#zaci {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 40px;
}Tak budeš mít cca to co si chtěl, samozřejmě zbav se veškerých marginů ... Případně můžeš použít: css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit |
||
| nulovamezera Profil |
„Btw když si upravíš ten grid takto:“
No jenže ono to bude chtít zachovat všech 5 sloupečků. Na PC to bude moc široké, na mobilu to přeteče. Proto jsem to chtěl řešit tím flexem, kdy se mi ten počet přizpůsobí. Ovšem ten auto fit zní užitečně. |
||
| Kcko Profil |
nulovamezera:
Existují breakpointy ( CSS pravidlo @media)), prostě si pro konkrétní rozlišení určíš jiný počet sloupečků ne?
Mobil => 1 Malý tablet => 2 Velký tablet => 3 Desktop nižší => 4 Velký => 5 Případně použiješ auto-fit s kombinací minimální rozměru a jednotky frakce (FR). |
||
| nulovamezera Profil |
#14 · Zasláno: 1. 5. 2021, 11:00:46
Ach jo, to je na mě moc složitý :)
Nebo není, ale jsem líný dělat tolik práce jenom kvůli tomu, že tam budu mít úplně přesnou mezeru. Každopádně za pomoc s obrázkem děkuju. |
||
| Kcko Profil |
nulovamezera:
Složité to fakt není, neutíkej od toho, když se musíš naučit něco nového. Od toho tvorba webu / programování / kódování etc prostě je. Člověk se pořád učí něco nového, objevuje nové postupy, techniky, nové technologie ... // mobil
grid-template-columns: 1fr;
// maly tablet
@media (min-width: 500px) {
grid-template-columns: repeat(2, 1fr);
}
// vetsi tablet
@media (min-width: 767px) {
grid-template-columns: repeat(3, 1fr);
}
// desktop
@media (min-width: 1200px) {
grid-template-columns: repeat(5, 1fr);
} |
||
| nulovamezera Profil |
Mě se tadyta poloresponsivita moc nelíbí.
Co je vůbec to fr? |
||
| Kcko Profil |
#17 · Zasláno: 1. 5. 2021, 11:10:34
nulovamezera:
Tohle je naprosto normální postup. A pokud se Ti to nelíbí, tak to uděláš jak jsem psal výše přes auto-fill/auto-fit. A fr jednotka je jednotka frakce. Fr is a fractional unit and 1fr is for 1 part of the available space. The following are a few examples of the fr unit at work. The grid items in these examples are placed onto the grid with grid areas. The 4 columns each take up the same amount of space. |
||
|
Časová prodleva: 3 roky
|
|||
0