Richte ein Element an der Mitte jeder Flexbox aus [duplizieren]

9

Ich habe 3 divs, die Seite an Seite mit display: flex sind.

Der Inhalt dieser divs ist unterschiedlich groß, aber ich möchte in jedem einen Link erstellen, der immer unten liegt.

%Vor%

Auf diese Weise werden die Links immer aufgereiht angezeigt.

JSFiddle-Code

    
smally 01.01.2016, 03:43
quelle

2 Antworten

4

Hier sind zwei Methoden:

Verschachtelte Flexbox

%Vor%

DEMO 1

Absolute Positionierung

%Vor%

DEMO 2

Bei einer dritten Methode wird flex-direction auf column umgeschaltet. In einigen Fällen ist jedoch das Ändern der Flex-Richtung keine akzeptable Option, da sich das Verhalten des Layouts ändert. (Diese Methode wird hier nicht detailliert beschrieben, da sie bereits in einer anderen Antwort steht.)

    
Michael_B 01.01.2016, 06:48
quelle
8

Sie können display von .content in flex ändern und dann flex-direction: column hinzufügen, damit der Inhalt von oben nach unten fließt. Um das Kind-Ankerelement am unteren Rand zu positionieren, fügen Sie einfach add margin-top: auto hinzu:

Beispiel aktualisiert

%Vor%     
Josh Crozier 01.01.2016 03:46
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Erweitern Sie eine Tabelle in EPPlus C #