|
|||
Flexbox
Hallo, wer kann mir bitte helfen und eine Lösung finden?
Die beiden Container "main" und "aside" springen beim Zusammenschieben ab 650px (@ media screen) aus dem "div.wrap" mit der vorgegebenen Breite. Danke für Eure Hilfe!! Grüße Soelg HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Webseite Grundgerüst Flexbox</title> </head> <style type="text/css"> html body { height: 100%; margin: 0; box-sizing: border-box; } body { font-family: sans-serif; line-height: 1.3; padding: 1em; display: flex; /* body wird zur Flexbox, Flex-Items in einer Spalte */ flex-direction: column; } header, footer, main, nav, aside { background: #a8caf3; padding: 0.5rem; border: 0.5px solid #333; margin: 0.5rem; } header { width: 100%; margin-left: -0.5em } div.wrap { border: 0.5px solid #333; border-radius: 0.25rem; margin: 0 14% 0 14%; background: #faf2ce; height: 100vh; /* Fußbereich unten positionieren */ flex: 1; display: flex; /* main, nav und aside nebeneinander */ align-items: flex-start; /*Items Ausrichtung nach unten */ } footer { height: 35px; width: 100%; margin-left: -0.5em } /* Ausdehnung von main, nav und aside */ main { flex: 4; } nav { flex: 1; } aside { flex: 1.8; /* Box Weite*/ } @media screen and (max-width: 650px) { div.wrap { flex-direction: column; } aside { width: 100%; } main { width: 100%; } } </style> <body> <header>Header <nav>Navigation</nav> </header> <div class="wrap"> <main>Inhalt</main> <aside>Aside</aside> </div> <footer>Footer</footer> </body> </html> |
Sponsored Links |
Sponsored Links |
Stichwörter |
flexbox items breite |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Flexbox Frage | nubi007 | CSS | 5 | 23.10.2016 19:48 |
verschachtelte Flexbox - Probleme mit Firefox und IE | toccamonium | CSS | 2 | 08.11.2015 15:52 |
Flexbox mit Safari | lakatusch | CSS | 2 | 08.11.2015 09:48 |
CSS Flexbox | jominho | CSS | 2 | 14.12.2014 13:11 |
Flexbox & Vertikale ausrichtung des Textes | reyman1988 | CSS | 17 | 25.07.2014 18:48 |