Zeilenumbruch bei h1 in Flexbox

  • Ich hab ein div mit display:flex, damit ich den Inhalt vertikal und horizontal zentrieren kann.

    Innerhalb dieses DIVs habe ich eine h1 und eine h2, die nun jedoch nebeneinander sind, weil das flex auf sie wirkt. Setze ich bei der h1 ein display:block, ändert das aber nichts. Auch ein br nach der h1 ändert nichts daran, auch nicht mit clear all.

    Warum ist das so?

    Ich habe zwar eine Möglichkeit gefunden, sie untereinander zu bringen, allerdings mit einem span statt h2 (im span ein display:table). Den Trick kann man hier nachlesen.

    Das Problem mit einer background-color wie im Beispiel habe ich nicht, ich möchte einfach nur h1 und h2 wieder als Blockelement gestalten können.

    Wie ich das jetzt gelöst habe, ist nämlich die zweite Zeile (also mein span innerhalb der h1) nicht zentriert unter der ersten, sondern sie sind gemeinsam zentriert in der Flexbox, aber linksbündig dargestellt.


  • Zitat

    Innerhalb dieses DIVs habe ich eine h1 und eine h2, die nun jedoch nebeneinander sind, weil das flex auf sie wirkt. Setze ich bei der h1 ein display:block, ändert das aber nichts. Auch ein br nach der h1 ändert nichts daran, auch nicht mit clear all.

    Warum ist das so?

    Wenn Du display:flex verwendest, haben die Regeln, nach denen Flex die Elemente anordnet, Vorrang. Du kannst in dem Fall die Elemente jedoch sehr einfach untereinander anordnen, indem Du flex-direction: column; hinzu fügst.