Elemente in Flexbox links, mittig und rechts ausrichten

11

Ich versuche, diesen oberen Header mit flexbox zu erstellen.

Grundsätzlich möchte ich die <div class="header-title"> (Institution Institution 1) auf die Zeile mit den 3 anderen Elementen zentrieren, die Sie sehen. (Institutioner, Ledere und Log ud) wie Sie auf dem Bild sehen.

%Vor% %Vor%

Demo - JSFiddle

    
Dave Mikes 04.04.2017, 15:23
quelle

2 Antworten

11

Verwenden Sie verschachtelte Flex-Container und flex-grow: 1 .

Damit können Sie drei gleich breite Abschnitte in der Navigationsleiste erstellen.

Dann wird jeder Abschnitt zu einem (verschachtelten) Flex-Container, mit dem Sie die Links mithilfe von flex-Eigenschaften vertikal und horizontal ausrichten können.

Jetzt werden die linken und rechten Elemente an den Kanten des Containers angeheftet und das mittlere Element ist perfekt zentriert (auch wenn die linken und rechten Elemente unterschiedliche Breiten haben).

%Vor% %Vor%

jsFiddle

    
Michael_B 04.04.2017, 15:41
quelle
2

Wenn Sie offen dafür sind, Ihren HTML-Code zu ändern, müssen Sie alle Elemente in Ihrem Header auf derselben Ebene im DOM platzieren.

Hier ist ein funktionierendes Beispiel

%Vor% %Vor%
    
Kevin Jantzer 04.04.2017 15:38
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Berechnung eines Rankings mit Java 8 Stream API