/ / Wie richtet man die untere "Reihe" in der Flexbox aus, ohne die anderen zu beeinflussen? - CSS, Flexbox

Wie richtet man die untere "Reihe" in der Flex-Box aus, ohne die anderen zu beeinflussen? - CSS, Flexbox

Ich habe ein Problem. Ich habe eine Tabelle, die ich in Flexbox implementiert habe. Ich möchte die untere "Zeile" ausgerichtet machen, ohne den Abstand der anderen Zeilen zu beeinflussen. (Ich setze "row" in Anführungszeichen, weil es technisch keine Zeilen sind, es ist die letzte Zelle in drei verschiedenen Spalten)

Hier ist ein Screenshot von dem, was ich erreichen möchte: Design versuche ich zu implementieren

Hier ist ein JSFidel von dem, was ich bisher habe. Ich dachte, vielleicht würde dieses Stück es tun, aber es scheint nicht:

div.new-region-page div.three-col-buys a.read-more {
align-self: flex-end;
}

Ich habe zwei Hauptprobleme - das Ausrichten der "Mehr" -Zellen und das Ausdehnen der vertikalen Ränder auf dieselbe Länge über alle Spalten hinweg.

Es ist keine Option, Flex-Zeilen anstelle von Flex-Spalten zu verwenden, da dies im Mobile reaktionsschnell zusammenbrechen muss.

Hoffe jemand kann mir raten wie ich das mit flexbox erreichen kann. Ich habe verschiedene Flex-Attribute mit wenig Erfolg ausprobiert.

Antworten:

1 für die Antwort № 1

Sie müssen den Spaltencontainer (# top-buys) einstellen, um Folgendes anzuzeigen: flex; um alle 3 Spalten auf die gleiche Höhe zu bringen.

Sobald Sie das getan haben, können Sie Ihren Spalteninhalt anpassen, so dass sie nicht alle aus dem Zwischenraum zwischen den Einstellungen verteilt sind

Wenn Sie flex-grow hinzufügen: 0; auf der div.new-regions-Seite a.read-more wird es nach unten geschoben.