Navigation mit Flexbox zu breit für Smartphones.

[fbube]

Hallo liebe Leute,

ich bin gerade dabei (meine Website) zu erstellen. Grundlegende Erfahrung in HTML und CSS habe ich. Allerdings gibt es gerade ein Verständnisproblem mit Flexboxen. Das Problem liegt in der Navigationsleiste:

...
<div id="wrapper">
            <h1 id="start">Marcus-Ringer.de</h1>
        <nav>
            <ul>
                <li><a id="active" href="index.html">STARTSEITE</a></li>
                <li><a href="hobbies.html">HOBBIES</a></li>
                <li><a href="blog.html">BLOG</a></li>
                <li><a href="impressum.html">IMPRESSUM</a></li>
            </ul>
        </nav>
        <div id="main">
            <article>
...

Und dem CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("../bilder/marcus.png");
    background-attachment: fixed;
    overflow: scroll;
    background-repeat: no-repeat;
    background-color: #fff;
    color: #331a00;
}
nav > ul {
	display: flex;
    border-top: 1px solid #a0a0a0;
    border-bottom: 1px solid #a0a0a0;
    background-image: url(../bilder/bg.png)

}

nav > ul > li {
    float: left;
    margin: 1.2em;
    list-style-type: none;
}
nav > ul > li > a {
    color: #331a00;
    font-weight: bold;
    text-align: center;
    font-family: Comfortaa;
    font-size: 1.2em;
    text-decoration: none;
    padding: 0.5em;
    letter-spacing: 0.2em;
    display: block;
}

nav > ul > li > a:hover {
    color: #e6b800;
    font-weight: bold;
    font-family: Comfortaa;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.2em;
}
nav > ul > li > #active {
    color: #e6b800;
    font-weight: bold;
    font-family: Comfortaa;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.2em;
}
div#main {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-image: url(../bilder/bg2.png);
}
h1 {
    font-family: Rock Salt;
    font-size: 2.5em;
    text-align: right;
    color: #331a00;;
    letter-spacing: 0em;
    padding-right: 1em;
    margin: auto;
    width: calc(100% - 1em);
    background-image: url(../bilder/bg2.png);
}
h2{
    font-family: Comfortaa;
    font-size: 1.8em;
    margin: 1em 0 1em;
}
h3{
    font-family: Comfortaa;
    font-size: 1.5em;
    margin: 1em 0 1em;
}
article > p {
    font-size: 1.5em;
    font-family: Comfortaa;
    line-height: 1.5em;
    margin: 1em 0 1em 0;
}
time {
font-size: 1.5em;
    font-family: Comfortaa;
    line-height: 1.5em;
    margin: 1em 0 1em 0;
    color: #e6b800;
}
article {
    flex-shrink: 2;
    padding: 10px;
    width: 90vw;
    margin: 0 5vw;
    z-index: 2;
}
article > img {
    float: left;
    margin: 0 1em 0.2em 0;
    padding: 0;
    max-width: 25vh;
}
article > ul > li {
    line-height: 1.5em;
    font-family: Comfortaa;
    color: #331a00;
    font-size: 1.5em;
}
article > a {
    line-height: 1.5em;
    font-family: Comfortaa;
    font-size: 1.5em;
}

Die Navi-Leiste macht auf Computerbildschirmen einen guten Eindruck. Auf dem Smartphone ist sie jedoch nach dem zweiten Menüpunkt abgeschnitten. Der Rest verteilt sich wunderbar nach unten, doch die Menüpunkte wollen einfach nicht untereinander rutschen, sondern bestehen weiterhin darauf nach rechts aus dem sichtbaren Bereicht zu ragen. Das hat natürlich zur Folge, dass man nach rechts scrollen muss, um den Rest der Navi-Leiste zu sehen.

Entferne ich display: flex aus der ungeordneten Liste (nav > ul), machen die Menüpunkte was sie sollen. Doch dann hat die Liste keine Höhe mehr und somit auch keinen Hintergrund.

Könnt ihr mir sagen wo hier das Verständnisproblem liegt, und wie man das behebt? Vielen Dank schon mal vorab!

Gruß Marcus

[MrMurphy1]

Hallo

Mit "display: flex;" wird zusätzlich ein Zeilenumbruch verhindert. Wenn die Flex-Items (in deinem Fall die li-Elemente) bei schmalen Fenstern untereinander rutschen sollen musst du bei ul zusätzlich "flex-wrap: wrap;" hinzufügen.

Gruss

MrMurphy

[fbube]

Dankesehr! Die Sache habe ich gar nicht bedacht. Werde ich ausprobieren! 😀

[marctrix]

Hej fbube,

es kommt drauf an, wie das Ergebnis sein soll.

Grundsätzlich ist es empfehlenswert mit der Smartphone-Darstellung (also einspaltig) zu beginnen.

Einen Tipp, wie du Flexboxen dazu bringst, automatisch umzubrechen, hast du ja schon bekommen:

flex-wrap: wrap;

Vielleicht möchtest du aber mehr Kontrolle. Wenn alle List-Items untereinander stehen sollen, erreichst du das, indem du die y-Achse als Hauptachse festlegst:

flex-direction: column;

Für große Bildschirme kannst du dann statt column den Wert wieder auf den Standard zurück setzen.

Obwohl der Artikel im Wiki zu Flexbox gut ist, würde ich dir auch mal einen Blick auf den Conplete Guide to Flexbox empfehlen. Dort ist zu jeder Eigenschaft und allen werten ein Bild bereit gestellt, dass die Auswirkungen zeigt. Zum üben sei noch das obligatorische Flexbox froggy empfohlen.

[fbube]

Vielen Dank! Die Tipps klingen vielsversprechend! 😀