Problém s flexboxem

Napsal StepanP;1501177

Hezký večer,

už delší dobu hledám řešení jednoho problému, ale jsem si bezradný.

Řekněme, že mám na webu sekci novinek postavenou na flexboxu. Jestliže se mi zobrazuje 3, 6, 9 novinek, je vše v pořádku. Nicméně, pokud se mi zobrazí například jen 8 novinek, tak se mi 3. řádek rozhodí a článek číslo 8 zabere pozici článku 9. Nesetkal se s tím někdo? Snažil jsem se googlovat, nicméně marně.

Codepen: https://codepen.io/anon/pen/wRKgeJ

Děkuji.

Napsal Bejk;1501188

Dobrý večer,

však tam máte justify-content: space-between; tedy vypadá to přesně tak jak by mělo. Vyzkoušejte jiné hodnoty pro tento atribut. Sám jsem s tímto několikrát bojoval, někdy jsem tam nechal space-evenly a jindy jsem to nechal prostě zarovnávat vlevo a přidal margin.

---------- Příspěvek doplněn 12.12.2018 v 19:46 ----------

Zkuste mrknout na toto https://css-tricks.com/filling-space-last-row-flexbox/

Taky jsem s tím kdysi experimentoval, ale nakonec jsem to vzdal.

Napsal Jobis;1501206

Dobrý večer,

řešení není složité, sám jsem jej vícekrát využil a vše funguje jak má.

Align last row to grid

Celé kouzlo je v tomto kousku scss. Pseudoelement vyplňuje prostor za prvky (flex: auto jej natáhne na celou zbývající šířku).

&:after {

content: "";

flex: auto;

}

Napsal Alex_H;1501364

.boxes:after tam mít nemusíte a třeba takhle mi to funguje dobře. (Jen nth-of-type spolehlivě funguje až od IE9, ale flexbox stejně až od IE10 :D ). Doufám že někdo najde elegantnější řešení, mě se nad tím nechce moc přemýšlet :-)

.boxes { display: flex; justify-content: flex-start; //Nemusí být flex-wrap: wrap; } .single-box { color: #323852; margin-right: 3.5%; } .single-box:nth-of-type(3n) { margin-right: 0; }

Napsal Aleš Jiříček;1501358

.wrapper { max-width: 1200px; margin: auto; } .boxes { display: flex; align-items: flex-start; flex-wrap: wrap; } .single-box { position: relative; display: flex; flex: 0 1 30%; height: 250px; background: #fff; align-items: center; justify-content: center; flex-direction: column; background: grey; margin: 1rem; } .single-box { color: #323852; } .single-box h5 { font-size: 30px; color: white; }

nejsem si jist ze chapu co presne potrebujes...

Napsal Toliceek;1501501

Mínusovej margin je úplně v pohodě. Často vidím zbytečně složité řešení, když stačí použít právě mínusovej margin. Občas s tím má problém IE (ten má ale obecně problém se zobrazováním webů, zajímalo by mě co chtěli v MS tvořit prvotně, že z toho omylem vznikl právě prohlížeč) a Safari (v konkrétních složitějších případech), obzvláště pokud nepoužíváš normalize.css což určitě doporučuju, člověk tím vyřeší dost problémů různého zobrazení v prohlížečích.

Pozor taky na to, že pokud element nemá šířku (bere si jí z rodiče například), tak ti mínusovej margin ten div rozšíří, takže div o šířce 100px (podle rodiče) s marinem -22px má 144px, pokud ale nastavíš přímo tomuhle elementu pevnou šířku 100px a margin -22px, tak bude mít reálně pro obsah jen 56px + margin.