Snadná tvorba vlastního e-shopu nebo webstránky online v systému WEXBO.com CZ/SK
Zobrazují se odpovědi 1 až 13 z 13

Problém s flexboxem

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

  2. Co se právě děje na Webtrhu?
  3. 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.

  4. Citace Původně odeslal StepanP Zobrazit příspěvek
    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;
    }

  5. Citace Původně odeslal Bejk Zobrazit příspěvek
    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 ----------

    Citace Původně odeslal Jobis Zobrazit příspěvek
    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

  6. Kód:
    .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...

  7. .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 :-)
    Kód:
    .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;
    }

  8. Citace Původně odeslal Alex_H Zobrazit příspěvek
    .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 :-)
    Kód:
    .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 ----------

    Citace Původně odeslal Aleš Jiříček Zobrazit příspěvek
    Kód:
    .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

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

  10. 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-cheats...ustify-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

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

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

  13. 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. Citace Původně odeslal Toliceek Zobrazit příspěvek
    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. :)

Hostujeme u Server powered by TELE3