Autor Zpráva
hypot
Profil
Zdravím, mám problém se zarovnáním prvků ve flexboxu.
Mám flexbox rozdělený na dva řádky, v prvním jsou tři divy o stejné šířce (tedy 1/3 flexboxu), v druhém řádku jsou dva divy, z nichž první má mít stejnou šířku jako divy v prvním řádku (tedy opět 1/3 flexboxu), zatímco ten druhý dvojnásobnou šířku (tedy 2/3 flexboxu). Pokud mezi divy nejsou žádné mezery, jsou pravý okraj prvního divu na prvním řádku a prvního divu na druhém řádku zarovnané pěkně pod sebou. Problém nastane, pokud mezi divy vložím mezeru (margin) 10px (na velikosti mezery nezáleží). V tom případě nastane z hlediska diváka narušení vzhledu, jež lze vidět na codepen.io/pigner/pen/wJvvyG, totiž že pravý okraj prvního divu prvního řádku a prvního divu druhého řádku už nejsou zarovnané pod sebou, poněvadž první div druhého řádku je o něco širší. S tím jsem původně nepočítal, ale je to vlastně logické, protože v prvním řádku se divy rozdělí do prostoru o šířce flexboxu bez 20px, kdežto v druhém řádku do prostoru o šířce flexboxu bez 10px, takže v druhém řádku mají divy k dispozici víc prostoru a tudíž je první div druhého řádku širší než první div prvního řádku, byť jen o pár pixelů. Dá se to nějak upravit, aby první div druhého řádku měl zcela stejnou šířku jako první div prvního řádku a byly tudíž pěkně zarovnané pod sebou, i když se tím na druhém řádku mírně naruší poměr 1:2 obou divů? Má to vůbec řešení při použití flexboxu?
Kcko
Profil
hypot:
Řešil jsem to taky, ale už to nemůžu najít, podle tam ten margin nemá co dělat a musíš na to jít jinak viz jsfiddle.net/c3FL2/19
Tady k tomu máš ještě článek, který to popisuje víc www.heydonworks.com/article/flexbox-grid-finesse

Takhle nějak by to mohlo fungovat +/- (děláno v rychlosti files.rjwebdesign.cz/i/20170223-122034.png)
Kdybys přišel Ty nebo nikdo jiný na to jak to ošéfovat s marginem, tak se pochlubte :)
hypot
Profil
Díky. Já jsem uvažoval podobně, i když border mě zrovna nenapadl. Měl jsem v úmyslu využít padding a background-clip: content-box, čímž by se docílilo stejného vzhledu jako při použití marginu. Jenž i když jsem divům nastavil box-sizing: content-box, nefungovalo mi to a tehdy jsem byl nucen zde položit dotaz. Nakonec jsem zjistil při prohlížení tvého řešení na http://files.rjwebdesign.cz/i/20170223-122034.png, že jsem chybu udělal jinde, poměr velikosti prvků flexboxu jsem totiž nevhodně nastavil pomocí prostého flex: 1 a flex: 2, čili fakticky pomocí flex-grow, ale správně to musí být pomocí flex-basis nebo pomocí width.
Nakonec dám raději přednost mezerám utvořeným pomocí paddingu, ale i tak mi tvoje odpověď pomohla.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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