Diskuze: Mé chápání flexboxu (+zápatí) - přijdu do pekla?

Roman Duchoň

Člen

Roman Duchoň:16.11.2017 20:10

Ahoj,
asi po třech měsících se vracím k tomu, kde jsem se zasekl a to jest flexbox ve spojitosti se zápatím vždy dole.
Mám radost, že jsem tomu možná konečně přišel na kloub a raději bych se v tom utvrdil, popř. opravil, než se to naučím blbě.
Chápu správně, že když si chci rozložit stránku, musím nejdřív specifikovat horizontální a pak vertikální prvky?

Př.

<body class="flexbox-radky">
    <div id="zahlavi">
        <h1>ZÁHLAVÍ</h1>
    </div>
    <div class="flexbox-sloupce">
        <div id="menu">
        </div>
        <div id="obsah">
        </div>
    </div>
    <div class="zapati">
        Zápatí
    </div>

Lepší znění na jsfiddle .

Tak co, mohu to takto používat? Chápu to správně? Jde to zjednodušit? Se totiž raduji, že mi to konečně funguje jak má a že jsem úspěšně začal tam, kde jsem skončil.
Je dosti různých článků na netu a každý postupuje tak nějak jinak...

Odpovědět

16.11.2017 20:10

Lukáš Křehula

Tvůrce

Lukáš Křehula:16.11.2017 20:42

Tak ono je spoustu způsobů jak udělat tohle a tamto, a tvoje řešení mi přijde jako jedno z těch asi nejvhodnějších. Resp. jediný co bych na tvém kódu změnil by byla výměna vlastnosti height za min-height u body.
Jinak by se to dalo udělat ještě úspornějším způsobem, jako je např. tohle:

<body>
<header>Obsah hlavičky</header>
<main>Obsah stránky</main>
<footer>Patička</footer>
</body>

body {
    max-width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

Nahoru Odpovědět

16.11.2017 20:42

Roman Duchoň

Člen

Roman Duchoň:16.11.2017 21:07

Jasné, jak jsem dlouho nic nepsal, nějak jsem zabloudil moc do divů. I class jsem popletl.

No ale když budu chtít dát do flexu i menu, musím si pohrát s

flex-direction: column

popř. row, ne?...
Nebo je to blbý nápad? Zobrazení na více mediích...

Nahoru Odpovědět

16.11.2017 21:07

Honza Bittner

Tvůrce

Honza Bittner:17.11.2017 0:15

Hele, osvědčilo se mi dělat pro rozložení speciální prvky a do nich vkládat "pomocné" elementy, které až obsahují ten content. Lépe se to spravuje a také u obsahu většinou už zase chceš display block, ne flex.

Pokud chceš footer vždy dole, ale při větším obsahu ho zobrazit až po scrollu až dolu, tak https://jsfiddle.net/8abawwyk/

Pokud chceš mít footer viditelný vždy dole, tj. aby obsah scrolloval sám o sobě, tak změníš jen u .content flex z flex: 1 0 auto; na flex: 1 1 auto;, viz https://jsfiddle.net/8abawwyk/1/

Sám o sobě bych body nestyloval. Lepší a univerzálnější je udělat si nějaký kontejner.

Editováno 17.11.2017 0:18

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

17.11.2017 0:15

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Roman Duchoň

Člen

Roman Duchoň:17.11.2017 17:17

No dobře... když nad tím tak přemýšlím, vlastně se opravdu nedá říct co a jak.
Takže si prostě udělám nějaký styl a myslím si, že on se časem sám vypiluje.
Ten můj smysl pro pořádek a přehlednost není tak marnej, jen ještě ty znalosti chybí. Jedu dál

Děkuji vám!

Nahoru Odpovědět

17.11.2017 17:17

Naučíme tě pracovat na home-office.

Více info »

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.