/ / Jak wyrównać dolny "rząd" w gnieździe flex bez wpływu na pozostałe? - css, flexbox

Jak wyrównać dolny "rząd" w gnieździe flex bez wpływu na pozostałe? - css, flexbox

Mam problem. Mam tabelę, którą wprowadziłem w flexbox. Chcę, aby dolny "wiersz" był wyrównany, bez wpływu na odstępy pozostałych wierszy. (Wstawia "wiersz" w cudzysłowach, ponieważ technicznie nie jest wierszem, jest to ostatnia komórka w trzech różnych kolumnach)

Oto zrzut ekranu z tego, co chcę osiągnąć: projekt staram się wdrożyć

Tutaj jest JSFiddle tego, co mam do tej pory. Myślałem, że może to trochę to zrobi, ale wygląda na to, że nie:

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

Mam dwa główne problemy - wyrównanie komórek "Zobacz więcej" i wydłużenie pionowych granic do tej samej długości we wszystkich kolumnach.

Opcja elastycznych wierszy zamiast kolumn elastycznych nie jest opcją ze względu na sposób, w jaki musi się ona w elastyczny sposób zwijać w telefonie komórkowym.

Mam nadzieję, że ktoś może doradzić, jak mogę to osiągnąć dzięki flexbox. Próbowałem różnych atrybutów flex z niewielkim sukcesem.

Odpowiedzi:

1 dla odpowiedzi № 1

Musisz ustawić kontener kolumn (# top-buy), aby wyświetlić: flex; aby wszystkie 3 kolumny miały tę samą wysokość.

Gdy to zrobisz, możesz dostosować zawartość kolumny tak, aby nie były rozłożone w przestrzeni pomiędzy ustawieniami

Jeśli dodasz flex-grow: 0; do strony div.new-a.read-more to popchnie ją na sam dół.