Navigationsleiste mit Hilfe von Flexbox auf die rechte Seite verschieben

onka12

Grünschnabel
Hallo Zusammen,
ich bin sehr neu auf dem Gebiet von HTML & CSS und versuche gerade eine mir gestellte Aufgabe zu lösen. Ich möchte ein flüssiges Layout erstellen von einer recht einfachen Startseite. Meine Navigationsleiste sollte jedoch auf der rechten Seite positioniert werden. Die Frage ist welches HTML- Element ich mit einer Flexbox-Eigenschaft modifizieren muss, damit die Navigation untereinander auf der rechten Seite positioniert wird.
Ich hoffe, dass mir hier einer helfen kann.
Vielen Dank im Voraus!
 

Jan-Frederik Stieler

Monsterator
Moderator
Also das HTML-Element richtet sich ja nach der Semantik.
Wenn es sich um Deine Hauptnavigation handelt solltest Du sowas erstellen
HTML:
<nav>
    <ul>
        <li><a href="foobar.html">foobar</a></li>
        <li><a href="barfoo.html">barfoo</a></li>
    </ul>
</nav>

JSBin Working Example
Und am besten auch an Acessibility-Attribute denken.

Viele Grüße
 

Loddar1

Erfahrenes Mitglied
Es kommt auf deine Flexbox an, aber eigentlich geht das nur mit 2 spalten

links main und rechts aside

und in aside kommt deine Navigationsleiste (untereinander)

HTML:
<header>...</header>
<main>
 
<article>
    Hier dein Content
</article>
 
<aside>
    Hier deine Navigation
</aside>

</main>

<footer>...</footer>

CSS:
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
  margin:0;
  padding:0;
}

.header {
 
}

main {
  display: flex;
}

article {
  flex:3;
}

aside {
  flex:1;
}

footer {

}

So etwa als Beispiel.

Wenn Du mehr spalten brauchst, dann solltest du es mit Grid versuchen.

Ich würde auf jeden Fall auf JavaScript verzichten!
 
Zuletzt bearbeitet: