Frage flexbox / positionieren mit {margin: auto}

[annsen]

In meinen Unterlagen steht ein Beispiel für eine Positionierung.

Es gibt eine Liste (ul/li):

<ul>
    <li> menüpunkt1</li>
    <li> menüpunkt2</li>
    <li> menüpunkt3</li>
    <li> menüpunkt4</li>
</ul>

In dem umgebenden Div gibt es einen Leerraum, der zwischen Menüpunkt3 und Menüpunkt4 positioniert werden soll. Um die Menüpunkte vlnr und den Leerraum zwischen MP3 und MP4 zu positionieren, ist das CSS folgendermaßen angegeben:

ul {display:flex;}
li:last-of-type {margin-left: auto;}

Hiernach sollte sich Menüpunkt4 ganz rechts platzieren und die Menüpunkte 1-3 nach links schieben (vlnr):
Menüpunkt1 - Menüpunkt2 - Menüpunkt3 - LEERRAUM - Menüpunkt4.

Hierzu meine Frage - was mache ich, wenn ich aber unterschiedliche Elemente im umgebenden Div habe und die anordnen möchte?

BSP:

ich habe einen DIV (article class="beispielbox") und in dem gibt es 3 Elemente, die ich in der Höhe positionieren möchte:
1x Überschift (h1)
1x Text (p)
1x Bild (img in div.bild)

Wie muss ich jetzt vorgehen? Ich kann ja sicher(?) nur Elemente der gleichen Art wie oben geschrieben ansprechen, oder?
Meine Idee: ich packe die Überschrift und den Text jeweils in ein Div und spreche die 3 Divs dann wie folgt an:

article.beispielbox {display:flex;}
div:last-of-type {margin-top: auto;}

Damit mache ich den umgebenden Div "article" zu einer Flexbox, Überschrift und p-Tag werden vom ganz unten positionierten div.bild nach oben geschoben.

Erkennt jemand meinen Denkfehler? Das funktioniert so nicht... Das Bild beibt nicht komplett unten.

Der Vollständigkeit wegen: die Box steht neben einer zweiten (genau gleich aufgebauten) Box - diese beiden Boxen sind Bestandteil einer Flexbox. Ich habe also Flexboxen verschachtelt.
Die zweite Box enthält aber eine Zeile mehr Text und diese Box ist komplett gefüllt - hier ist das Bild korrekt am unteren Rand positioniert.
Grundsätzlich möchte ich gern in allen Boxen oben eine Überschrift, darunter den Text, dann den Leerraum (der je nach Textmenge der Box variieren kann) und darunter das Bild, dass am unteren Rand der Box positioniert sein soll.

Aktuell ist es bei beiden Boxen so: die Überschriften stehen bei beiden Boxen auf einer Höhe, die Texte stehen ebenfalls auf einer Höhe. Bei der zweiten Box schließt sich dann das Bild an - bei der ersten Box ist das auch so aber durch den etwas kleiner ausfallenden Text und das Bild, das sich direkt anschließt, habe ich unten in der Box einen Leerraum.

Kann mir dazu jemand verbindliche Infos/Antworten/Hinweise geben?

Vielen Dank vorab!! :-)

 

[MrMurphy]

Hallo

Ich habe also Flexboxen verschachtelt.

Das ist grundsätzlich richtig und auch so vorgesehen und einer der Vorteile von Flexbox.

Ich kann ja sicher(?) nur Elemente der gleichen Art wie oben geschrieben ansprechen, oder?

Nein, die Art der Elemente ist in der Regel egal.

Meine Idee: ich packe die Überschrift und den Text jeweils in ein Div

Dafür gibt es auch eine Lösung, die ist aber nicht notwendig.

Erkennt jemand meinen Denkfehler?

Ja.

Bei Flexbox muss immer die Richtung der Flex-Items beachtet werden (main-axis, cross-axis). margin-auto funktioniert immer (oder nur) in der Hauptrichtung.

Du kannst also h1, p und img direkt nacheinander in article.beispielbox schreiben. Wobei ich Bilder grundsätzlich in ein figure-Element schreibe, da ich dadurch einige grundsätzliche Probleme vermeiden kann.

article.beispielbox erhält dann die CSS-Anweisungen

display: flex;
flex-direction: column;

und das Bild zum Beispiel die Anweisung

margin-top: auto;

Durch die Anweisung flex-direction: column; geht die Hauptrichtung der Flex-Items (in diesem Fall h1, p und img) von oben nach unten und margin-top: auto; funktioniert.

Solche nebeneinanderstehenden Container mit gleichem Aufbau werden auch als Cards bezeichnet.

Ein praktisches Beispiel:

http://boratb.bplaced.net/index66.html

Gruss

MrMurphy

 

[annsen]

Hallo MrMurphy,

vielen Dank für dein Beispiel.

In einem ersten Versuch gings nicht so richtig (im 2., 3. und 4. auch nicht) aber nun habe ich meinen Code mal verschlankt (verschachtelte Div´s und etwas "Beiwerk" raus und Benennungen an deine Vorgaben angepasst) und nun funktioniert es auch. Allerdings muss ich jetzt erstmal genau gucken warum das so funktioniert und Schritt für Schritt mein Zeugs wieder dazu bauen und gucken was wie reagiert... flex (grow/shrink/basis) habe ich bisher noch nicht verwendet - werde ich auch nochmal nachschlagen.

In deinem Beispiel werden die Bilder in der Größe angepasst - bei mir passiert das nicht, obwohl ich der Meinung bin es wie du eingetragen zu haben. Kannst du mir sagen wo ich was vergessen habe?

Vielen Dank nochmal und Gruß!!!