NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Roman Duchoň
Člen
Avatar
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
RD
Avatar
Lukáš Křehula
Tvůrce
Avatar
Odpovídá na Roman Duchoň
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
Avatar
Roman Duchoň
Člen
Avatar
Odpovídá na Lukáš Křehula
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
RD
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Roman Duchoň
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í
Řešení problému
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.
Avatar
Roman Duchoň
Člen
Avatar
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
RD
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.