XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Flexbox Frage (http://xhtmlforum.de/showthread.php?t=73047)

nubi007 23.10.2016 07:44

Flexbox Frage
 
Liste der Anhänge anzeigen (Anzahl: 1)
Ich hatte mich ja mal an Euch gewendet weil ich div boxen nebeneinander angeordnet haben möchte.
Daraufhin wurd ich auf flexbox hingewiesen was mir gänzlich unbekannt war da ich eine längere pause eingelegt hatte.

Nun habe ich mir ein layout überlegt.
Und im Prinzip versteh ich das handling mit flexbox.

Im Anhang findet ihr einen gezeichneten prototype.
Mein einziges Problem dabei ist wie ich die flexcontainer 3 und 4 nebeneinander bekomme.
3 hat kindelemente untereinander inne und 4 ist erstmal einfach nur einen flexcontainer daneben.

Vielleicht kann mir ja da jemand nen tip geben.

edit: 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?

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.

MrMurphy 23.10.2016 13:06

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

nubi007 23.10.2016 15:57

ich danke dir...ich seh schon ich muss einiges an wissen auffrischen.
das was ich z.b. als aside assoziiert hatte war dass es für randbemerkungen dient.nicht für nen menü.letztlich könnte ich das auch anders benennen, oder hat aside eine spezielle funktion.
ich werde mir auf jeden fall alles neue von css3 und html5 mal anschauen.nur ist es nicht immer so einfach was im web zu finden was alle änderungen komplett zusammenfasst

MrMurphy 23.10.2016 16:53

Hallo

Zitat:

das was ich z.b. als aside assoziiert hatte war dass es für randbemerkungen dient.
Ja, unter anderem.

nav ist nur für die Hauptnavigation gedacht. Für weitere Links kann dann zum Beispiel aside verwendet werden, wenn sie nicht zum eigentlichen Hauptartikel gehören. Dann müssten sie wiederum im main stehen.

Ohne den kompletten Inhalt deiner Webseite zu kennen kann ich deshalb nur raten welches Element jeweils angebracht ist. Andererseits kann ich auch keinen Fehler machen, da es keine Vorgabe gibt.

Wenn deine Hauptnavigation aufgeteilt ist kann statt aside genau so nav richtig sein, so dass die Webseite zwei nav enthalten würde. Dass kann genau so korrekt sein.

Um Lösungen aufzuzeigen ist es aber übersichtlicher unterschiedliche Container / Elemente zu verwenden, auch falls sie nicht direkt zum Inhalt passen.

Gruss

MrMurphy

nubi007 23.10.2016 18:32

mit welchem programm hast du denn mein wunschlayout umgesetzt?(und natürlich angepasst)

MrMurphy 23.10.2016 19:48

Hallo

Als Betriebssystem verwende ich Windows und als Editor "Sublime Text 2".

Wobei der Editor beim Erstellen von Webseiten eine untergeordnete Rolle spielt.

Deshalb halte ich auch nicht von Ratschlägen welchen Editor oder sogar welche Version man angeblich benutzen MUSS. Da wird leider viel Unsinn geschrieben und häufig Quatsch über Editoren geschrieben, die der vermeintlich neutrale Ratgeber selbst nicht verwendet und häufig nicht mal richtig kennt.

Die Editoren müssen schlicht einige Voraussetzungen beherrschen. Heutzutage zum Beispiel mit UTF-8-codierten Dateien umgehen können.

Viel wichtiger ist aber dass die Anwender ihre Editoren kennen und beherrschen. Den Unterschied machen dann nur noch einige Funktionen, die man persönlich häufig anwendet. Wer Englisch nicht beherrscht ist zum Beispiel mit deutschsprachigen Editoren und deutscher Anleitung besser aufgehoben.

Gruss

MrMurphy


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:00 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023