zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.05.2018, 00:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.05.2018, 01:32
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Also auf die schnelle diesen Bereich wie folgt ändern

Code:
@media screen and (max-width: 650px) {
  div.wrap {
     flex-direction: column;
     align-items: stretch;
  }
  aside {
	  /* width: 100%; */
  }
  main {
	  /* width: 100%; */
  }
}
sobald Du von flex-direction von row auf column wechselst, ändert sich ja auch der Achsverlauf.

align-items ist dann somit für die x-achse zuständig und das stretch sorgt dafür, dass die flex items in der Breite aufgespannt werden.

Die width:100% bei aside und main brauchst Du somit nicht.


Sind aber noch ein paar unsaubere Dinge in Deinem Dokument. Vielleicht nochmal genauer validieren
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
flexbox items breite

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:49 Uhr.