justify-content: center; & align-items: center; werden ignoriert.

  • Ich code aus Übungszwecken ein OnePageLayout mit Flexbox. Komischerweise tritt wieder das bekannte Problem mit justify-content: center; & align-items: center; auf.


    Ich möchte in <section id="seite_1> einen Container mit 50% Breite definieren. Der dem untergeordnete Container <div class="content_box_seite_1"> igonriert jedoch folgende Angaben ;


    Code
    1. .content_box_seite_1 {
    2. width: 50%;
    3. display: flex;
    4. flex-direction: row;
    5. justify-content: center;
    6. align-items: center;
    7. }

    Wenn ich justify-content: center; & align-items: center; <section id="seite_1> zuweise, dann funktioniert es. Warum ist das so ?



  • Beide, justify-content: center;und align-items: center; , können ihre Wirkung nur entfalten wenn freier Raum vorhanden ist.

    Bei dem div.content_box_seite_1 ist das horizontal nicht der Fall, die Kindelemente füllen den Raum vollständig aus. Vertikal, je nachdem was es für ein Bild ist, schon und dann funktioniert auch die vertikale Zentrierung.

    Bei dem section#seite_1 ist jedoch in beiden Richtungen freier Raum da, horizontal weil Du dem div.content_box_seite_1 eine Breite von 50% gegeben hast, und die Zentrierung funktioniert.

  • Dankeschön verstanden. Das heißt dass der übergeordnete Container die im untergeordnete Inhalte horizontal und vertikal ausrichtet.

    Ich habe das jetzt so gelöst :


  • Das heißt auch, dass der Elterncontainer mit den Anweisung zur Positionierung über Höhe verfügen muss ? :)

    So das OnePageLayout funktioniert soweit gut nur, dass die Sprungmarken zu weit gehen. Also beim Anspringen der bestimmen Bereiche wird ein Teil des Inhaltes von der fixierten Navigation verdeckt und der Nutzer muss zurück scrollen. Gibt es dafür eine Lösung ?




  • Zitat

    dass die Sprungmarken zu weit gehen


    Du könntest den section-Elementen ein oberes Padding in Höhe der Navigation mit auf den Weg geben. In deinem Beispiel ist leider nur wenig zu sehen, da vernünftiger Inhalt fehlt. Da wir deine Hintergrundgrafik nicht haben servierst du uns teilweise zudem weißen Text auf weißem Grund.


    Da die Navigation durch "position: fixed" aus dem Dokumentenfluß genommen ist, kann der Rest der Seite auf die nicht mehr reagieren. Du musst dich also selbst um die erforderlichen Abstände kümmern.

  • Zitat

    Also beim Anspringen der bestimmen Bereiche wird ein Teil des Inhaltes von der fixierten Navigation verdeckt und der Nutzer muss zurück scrollen. Gibt es dafür eine Lösung ?

    Eine ganz einfache Lösung dafür kenne ich nicht. Hier habe ich etwas ausgearbeitet, was auf einem Muster basiert, das unser MrMurphy früher mal vorgestellt hat:

    Wahrscheinlich wäre eine Alternative, position: sticky; zu verwenden, dann wird der Header nicht aus Fluss genommen und das Problem müsste entfallen. Aber ich habe das noch nicht ausgearbeitet.

  • MrMurphy

    Danke padding-top: 150px; hat funktioniert. :)


    Sempervivum

    Danke für deine Mühe es ist immer schön ein anderen Lösungsansatz zu sehen und daraus zu lernen :)

    Da ergeben sich doch gleich neue Fragen zu deinem Code. Welchen Nutzen hat es dem Body display: flex;  &

    flex-direction: colum; zuzweisen ? Im normalen Dokumentfluss von HTML wird ja sowieso alles untereinander dargestellt ?

  • Zitat

    Im normalen Dokumentfluss von HTML wird ja sowieso alles untereinander dargestellt ?

    Das trifft zu. Ich habe jedoch damit ein anderes Ziel verfolgt, nämlich dass der Header und das scrollbare main-Element die Höhe des Browserfenster genau ausfüllt. Anderfalls würde entweder eine Lücke oder eine zweite Scrollbar auftauchen. Und das lässt sich mit Flex am einfachsten erreichen, ohne dass Berechnungen und eine feste Höhe des Headers erforderlich sind.


    Die Lösung mit Padding hatte ich auch als erstes angedacht, war dann aber davon abgekommen, weil beim Scrollen mit der Scrollbar dieses Padding sichtbar und das Layout stören würde. Außerdem muss man sich dabei auf eine feste Höhe des Header fest legen, so dass das Ganze nicht mehr voll responsiv ist.