IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:15.8.2018 18:29

Ahoj,
nějak mi konkrétně nejde jedna stránka s flexboxem v Chromu (a možná dalších...)
Nějak se pokusím osekat to podstatné z kódu (snad nebude nic přebývat, snad nebude nic chybět).
index.php:

<?php
?>
<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="css.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
        <header>
        <?php
        ?>
        </header>
        <aside>
            <!--MENU-->
            <?php
            ?>
        </aside>
        <!--MAIN CONTENT-->
        <div id="container">
            <div id="space">
                <?php
                include 'neco.php';
                ?>
            </div>
            <div id="content">
                <?php
                include 'neco.php';
                ?>
            </div>
            <!--SIDE CONTENT-->
            <div id="bests">
                <?php
                include 'neco.php';
                ?>
            </div>
        </div>
        <footer>
        </footer>
    </body>
</html>

css.css

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
header {
    flex: 5 1 0;
}
h3, h2 {
    margin-top: 0;
}
header {
    background: #C8DBF2;
}
aside {
    flex: 2 1 0;
    background: #95B6DD;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap-reverse;
}
#container {
    flex: 50 1 0;
    width: 100%;
    background: #C8DBF2;
}
footer {
    flex: 0.5 1 0;
    background: #95B6DD;
}
@media only screen and (min-width: 1000px){
    #container {
        display: flex;
        flex-direction: row-reverse;
    }
    #bests {
        flex: 50 1 0;
    }
    #content {
        flex: 3 1 0;
    }
    #space {
        flex: 1 1 0;
    }
}

Zkusil jsem: Dle rad internetu různě v kódu min-height: 0, min-width: 0, prefixes... různě googlit a žádné řešení mi nepomohlo. Třeba jsem jen dělal špatně.

Chci docílit: V osekaném kódu mi štve různá šířka obsahu.
To ani není tak podstatné, jako responzivní zobrazení např. ve smartfónu - a neroztahování aside dle obsahu (odkazů).
To je nežádoucí a chtěl bych se toho zbavit.
Příkládám i obrázky - kdy vždy č.1 je Firefox (funkční) a č.2 Chrome.

Děkuji moc za pomoc a jen podotýkám, že nejde o nic komerčního, jen můj pokus o hru za účelem vzdělávání se. :)

Odpovědět
15.8.2018 18:29
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 1 zpráv z 1.