Thema: Flexbox Frage
Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 23.10.2016, 13:06
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Daraufhin wurd ich auf flexbox hingewiesen was mir gänzlich unbekannt war da ich eine längere pause eingelegt hatte.
In deiner Pause ist nicht nur Flexbox eingeführt worden. Von daher wäre es sinnvoll du würdest dein gesamtes Wissen auf den aktuellen Stand bringen.

In HTML5 sollen so nicht einfach Container verwendet werden, sonderen deren Bezeichnung hängt von ihrem jeweiligen Inhalt ab. Mit deinen Angaben kann deshalb von den Bezeichnungen her kein korrekter Quelltext erstellt werden. Gleichzeitig wird der Quelltext durch die Verwendung von Elementen wie header, main, footer, article und so weiter deutlich übersichtlicher.

Im folgenden verwende ich für deinen Container 1 die Bezeichnung header, für deinen Container 2 die Bezeichnung nav, für deinen Container 3 die Bezeichnung aside und für deinen Container 4 die Bezeichnung main.

Zitat:
Mein einziges Problem dabei ist wie ich die flexcontainer 3 und 4 nebeneinander bekomme.
Für die Berechnungen muss das jeweilige box-Modell beachtet werden. Wobei der IE11 bei Flexbox grundsätzlich das content-Modell anwendet. Deshalb muss für den IE11 entweder eine extra Wurst gebraten werden oder es wird grundsätzlich das content-Modell für alle Browser verwendet. In diesem Beispiel habe ich mich für die zweite Möglichkeit entschieden.

Für das Layout muss zunächst der Zeilenumbruch erlaubt werden: flex-wrap: wrap

Dann bekommen header und nav so eine Breite, dass kein weiterer Container neben sie passt.

Code:
      header {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 95%;
      }
      nav {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 95%;
      }
aside und main bekommen dann unter Hilfe von calc solche Breiten, dass sie inklusiv padding, border und margin nebeneinander passen, etwas Platz für den Abstand verbleibt, außerdem dürfen sie nicht beliebig wachsen (flex-grow: 0):

Code:
      aside {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: calc(25% - 2rem);
      }
      main {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: calc(75% - 0.5rem);
      }
Beim flex-Container (hier body) wird durch justify-content: space-between dann festgelegt, dass die Container jeweils am äußeren Rand beginnen und enden. Da in diesem Beispiel maximal zwei Container (aside und main) nebeneinander stehen, werden sie maximal nach links und rechts verschoben:

Code:
      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
Zitat:
oder kann ich um die container 3 und 4 einen flex container legen.und eben diese auch als kind elemente verwenden, auch wenn bei 3 wieder kind elemente vorhanden sind?
Das ist zwar möglich, in diesem Fall aber nicht notwendig.

Da die dann drei Container im body-Element (header, nav, hilfscontainer) als Block-Elemente bereits von Haus aus in voller Breite untereinander stehen würden, bräuchte Flexbox dann nur auf den Hilfscontainer angewendet werden.

Bei Flexbox handelt es sich um reine Eltern-Kind-Beziehungen. Deshalb ist grundsätzlich vorgesehen, das Flexbox-Container verschachtelt werden können, also Flex-Kinder gleichzeitig wiederum Flex-Eltern sein können.

Bei meiner Lösung ist nav so zugleich Flex-Kind (flex-item) vom Elternelement (flex-container) body und selbst Elternelement (flex-container) für seinen Inhalt.

Zitat:
alternativ bräuchte ich eine andere lösung für container 3 um die einzelnen menüpunkte zu händeln und auch mit verschiedenen hintergründen belegen zu können.
Veraltet könntest du den einzelnen Menüpunkten Klassen zuweisen und denen die Hintergrundfarben zuweisen.

Seit CSS3 wurden dafür die Selektoren deutlich erweitert. Die Farben können zum Beispiel so zugewiesen werden:

Code:
      aside>:nth-child(1) {
         background-color: orange;
      }
      aside>:nth-child(2) {
         background-color: bisque;
      }
      aside>:nth-child(3) {
         background-color: gold;
      }
      aside>:nth-child(4) {
         background-color: yellowgreen;
      }
Die Selektoren ermöglichen auch die Farben nach bestimmten Mustern zu wiederholen, also zum Beispiel Zebramuster mit 2, 3, 4, ... Farben. Oder jeweils 4 Elemente mit gleicher Farbe und das 5, 10, 15 mit einer anderen Farbe. Oder ...

Eine komplette Seite mit einigen CSS-Anweisungen, die ich selbst grundsätzlich verwende, und weiteren für dein Layout erforderlichen Angaben könnte zum Beispiel so aussehen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexbox Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0 0 0;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0 0 0;
      }
      p, li, dl, dt, a, address {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0 0 0;
      }
      a {
         margin: 0;
      }
      figcaption {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
   }

   /*Grundlayout mit Flexbox*/
   @media all {
      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: flex-start;
      }
      body>* {
         box-sizing: content-box;
         padding: 0.5rem;
         border: 4px solid silver;
      }
      body>:nth-child(1n+2) {
         margin-top: 1rem;
      }
      header {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 95%;
      }
      nav {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 95%;
      }
      aside {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: calc(25% - 2rem);
      }
      main {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: calc(75% - 0.5rem);
      }
   }

   /*header*/
   @media all {
      header {
         text-align: center;
      }
   }

   /*nav*/
   @media all {
      nav {
         padding: 0;
         display: flex;
         justify-content: space-around;
      }
      nav>* {
         text-align: center;
         padding: 0.5rem;
         margin: 0;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(1px - 1rem - 8px);
      }
      nav>:nth-child(1n+2) {
         border-left: 4px solid gray;
      }
   }

   /*aside*/
   @media all {
      aside {
         padding: 0;
      }
      aside>* {
         padding: 0.5rem;
         margin: 0;
      }
      aside>:nth-child(1n+2) {
         border-top: 4px solid gray;
      }
      aside>:nth-child(1) {
         background-color: orange;
      }
      aside>:nth-child(2) {
         background-color: bisque;
      }
      aside>:nth-child(3) {
         background-color: gold;
      }
      aside>:nth-child(4) {
         background-color: yellowgreen;
      }
   }

   /*main*/
   @media all {
      main figure {
         margin-top: 1rem;
      }
   }

   </style>
</head>
<body>
   <header>
      <h1>Flex Container 1</h1>
   </header>
   <nav>
      <p>Kind 1</p>
      <p>Kind 2</p>
      <p>Kind 3</p>
   </nav>
   <aside>
      <p>Kind 1</p>
      <p>Kind 2</p>
      <p>Kind 3</p>
      <p>Kind 4</p>
   </aside>
   <main>
      <h2>Flex Container 4</h2>
      <p>Inhalt</p>
      <figure>
         <!-- <img src="2016_10_23_nubi007_flexboxl_layout_img_01.jpg"> -->
         <img src="index09_01.jpg">
         <figcaption>Vorlage für das Layout</figcaption>
      </figure>
      <p>Originaldiskussion: <a href="http://xhtmlforum.de/73047-flexbox-frage.html">XHTML Forum</a></p>
   </main>
</body>
</html>
Und ein Link zum direkten ausprobieren, der aber nicht ewig bestehen bleibt:

Flexbox Layout 01

Gruss

MrMurphy

Geändert von MrMurphy (23.10.2016 um 15:05 Uhr)
Mit Zitat antworten
Sponsored Links