Manuel Koch: Frage zum Wiki-Artikel „Layout mit Flexbox“

problematische Seite

Hallo, ich bin absoluter html Anfänger und teste gerade etwas rum. Ich würde gerne wissen, ob ich bei der verlinkten Seite auch mehrere articles übereinander anordnen kann und ob ich die News auch übereinander anordnen kann.

Ich habe bereits getestet, die article und news Bereiche doppelt zu verwenden aber dann erscheinen sie nebeneinander.

Ich bin sicher mir kann jemand helfen.

Vielen Dank schonmal

Manuel

  1. Hallo Manuel Koch,

    Zum Üben und für Verständniseffekte kann http://flexboxfroggy.com/ hilfreich sein.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Hallo Matthias, das habe ich eigentlich schon durch und auch soweit verstanden. Leider komme ich trotzdem nicht ganz mit. Danke Manuel

  2. problematische Seite

    Hallo

    Leider ist nicht ganz klar was du überhaupt erreichen willst.

    Du kannst zum Beispiel innerhalb des article-Elements und innerhalb des ersten aside-Elementes (News) weitere Container erstellen und mit Flexbox anordnen. Das wäre der einfachste und übliche Weg.

    Einer der großen Vorteile von Flexbox ist das es nicht vererbt wird und deshalb problemlos verschachtelt werden kann.

    Wobei das article-Element auch durch das main-Element ersetzt werden kann. Innerhalb des main-Elements könntest du dann beliebig viele article-Elemente hineinschreiben. Das würde ich so machen.

    Das Aussehen (Layout) der aktuellen article- und aside-Elemente kannst du dann den neuen Elementen zuweisen, falls du das aktuelle Aussehen beibehalten willst.

    Tip zur Vereinfachung: Die Präfixe für Flexbox kannst du schon lange weglassen.

    Für ein praktisches Beispiel wäre es hilfreich wenn du deine Ideen etwas genauer beschreiben könntest.

    Gruss

    MrMurphy

    1. problematische Seite

      Hallo

      Ich habe mal ein einfaches Beispiel mit mehreren News-Beiträgen und mehreren Artikeln ersellt.

      Du kannst ja Rückmeldung geben ob es deinen Vorstellungen nahekommt.

      Beispielseite

      Gruss

      MrMurphy