CSS Flex Box: Wie kann man "Flex Items" vertikal ausrichten, ohne die Höhe des Flex Items zu verlieren?

8

Momentan sehen meine "flex" -Elemente so aus (vertikal ausgerichtet: oben) ...

%Vor%



Mein Ziel ist es, dass sie so aussehen (vertikal ausgerichtet: Mitte) ...

%Vor%


Meine Anforderungen:

  • Der Flex-Container muss auf 100% Höhe bleiben
  • Die Flex-Elemente müssen 25% in der Höhe bleiben (entspricht 100%, was ohnehin der Standardwert ist).
  • Die Flex-Elemente müssen vertikal zentriert sein.
  • Dies muss reaktionsfähig und intelligent genug sein, um in der Mitte pro Gerät zu bleiben (also keine Zeilenhöhe / Auffüllung)

Ссылка

HTML

%Vor%

CSS

%Vor%     
Oneezy 03.05.2014, 09:39
quelle

4 Antworten

8

Um den Inhalt von flexbox child vertikal auszurichten, müssen Sie einige andere Techniken anwenden.

Ich glaube, da wird es Inhalt geben, eingepackt in tag, Sie können dann wieder flex verwenden und untergeordnetes Element in margin:auto; setzen DEMO

CSS aktualisiert:

%Vor%

HTML-Struktur:

%Vor%

Vielleicht ein Fallback mit display:table , kann nützlich sein: DEMO 2

%Vor%     
G-Cyr 03.05.2014, 09:45
quelle
3

Dein Problem hängt nicht wirklich mit der sogenannten flex-box zusammen, eigentlich ist es der Inhalt des div (nicht der div ), den du ausrichten willst Trick, um es normallyly auszurichten. Hier ist einer der Tricks:

%Vor%

Demo.

    
King King 03.05.2014 09:44
quelle
1

Dies ist der Flex Weg zur Lösung Ihres Problems:

HTML

%Vor%

CSS

%Vor%     
Barun 06.06.2014 16:39
quelle
1

Vielleicht verstehe ich das falsch, aber können Sie das nicht tun:

HTML (schlank)

%Vor%

CSS

%Vor%

Hier ist ein Codepen

    
skube 02.07.2017 14:53
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset tkinter Menü aktivieren / deaktivieren