Problém s flexboxem

12. 12. 2018 18:57:04

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.

12. 12. 2018 18:57:04

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379231

Bejk

(3 hodnocení)

12. 12. 2018 19:37:01

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.

12. 12. 2018 19:37:01

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379230

Josef Bištiak

(5 hodnocení)

12. 12. 2018 20:59:49

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.

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;

}

12. 12. 2018 20:59:49

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379229

StepanP

(12 hodnocení)

13. 12. 2018 15:31:03

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.

Díky, mrknu na to.

---------- Příspěvek doplněn 13.12.2018 v 15:33 ----------

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;
}

I když ten pseudoelement přidám, stále mi to blbne. Mezi 7. a 8. elementem pak není mezera, ale jsou na sebe natlačené. Aktualizoval jsem codepen.

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

13. 12. 2018 15:31:03

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379228

(20 hodnocení)

13. 12. 2018 15:43:21

nejsem si jist ze chapu co presne potrebujes...

13. 12. 2018 15:43:21

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379227

Alex_H

13. 12. 2018 16:12:55

.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 :-)

13. 12. 2018 16:12:55

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379226

StepanP

(12 hodnocení)

14. 12. 2018 01:10:14

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; }

Díky, uvidíme, jestli ještě někdo přispěje. :-)

---------- Příspěvek doplněn 14.12.2018 v 01:12 ----------

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...

Chci, aby se mi jednotlivé články řadily správně, vždy zleva doprava. Jenže například když je na webu 8 článků, tak poslední řádek nefunguje správně - vzniká mezi 7. a 8. článkem mezera.

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

14. 12. 2018 01:10:14

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379225

(20 hodnocení)

14. 12. 2018 10:03:49

No a zkousel jsi ten muj kod? dela presne to... nemuzes pouzivat justify-content kdyz potrebujes radit zleva doprava, justify vzdycky bude roztahovat nejakym zpusobem... takze jsem ho vyhodiol, nahradil marginem na jendtlivych boxech a dela to to co popisujes...

14. 12. 2018 10:03:49

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379224

Dominik Hašek

(12 hodnocení)

14. 12. 2018 10:42:31

Já si vždy vzpomenu na :-D

Řešení tu tuším padlo již několikrát, chceš aby to vypadalo takto https://codepen.io/anon/pen/aPdXwp nebo ne?

Jinak poměrně hezky zpracované nastavení flexboxu je na https://yoksel.github.io/flex-cheatsheet/#justify-content, já tam v začátkách docela často koukal.

Aktuálně mi to trošku přijde že točíš volantem doprava, ale chceš aby auto jelo doleva :-D

14. 12. 2018 10:42:31

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379223

StepanP

(12 hodnocení)

14. 12. 2018 10:52:23

U vašich řešení Aleši a Toliceeku mi vadí ten margin nalevo a napravo, kvůli kterému nejsou jednotlivé boxy roztaženy do 100 % divu .boxes.

Vadí mi tam ten margin zleva (např. u Aleše je to 20px) vždy na každém řádku u prvního příspěvku a margin zprava (o 20px) u třetího příspěvku vpravo.

Napadá někoho, jak to fixnout? Ty jednotlivé boxy pak nejsou roztažené na 100 % toho divu .boxes, ale na 100 % - 40px.

Pokud mám třeba container nastavený na 1200px a všechen content je roztažen do toho 1200px, jak by to mělo být. Nicméně s tímto řešením se .boxes roztáhnout pouze na 1160px.

Dalo by se to udělat tak, že bych divu .boxes nastavil záporný margin: 0 -20px;, čímž by se ty boxy jakoby roztáhly do šířky 1200px. Ale to podle mě není optimální řešení. Napadá někoho lepší řešení, jak ten margin u prvního příspěvku zleva a u třetího příspěvku zprava na každém řádku odstranit, abych nemusel u .boxes řešit tento problém záporným marginem?

Každopádně mockrát děkuji za pomoc, vážím si toho. :-)

14. 12. 2018 10:52:23

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379222

(20 hodnocení)

14. 12. 2018 11:10:27

kdyz ti funguje margin: 0 -20px; tak ho pouzij :) jeden z duvodu proc existuji zaporne marginy je i tohle... pouzij to co ti funguje, pokud ti to nikde s nicim nekoliduje, tak je to prece v pohode, css je takova alchymie :) a i kdyby kolidovalo tak to pujde vyresit nejakym obalovacim divem apod...

14. 12. 2018 11:10:27

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379221

Dominik Hašek

(12 hodnocení)

14. 12. 2018 11:32:26

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.

14. 12. 2018 11:32:26

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379220

StepanP

(12 hodnocení)

15. 12. 2018 23:41:27

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.

Rozumim, diky z pomoc. :)

15. 12. 2018 23:41:27

https://webtrh.cz/diskuse/problem-s-flexboxem#reply1379219

Pro odpověď se přihlašte.

Přihlásit