/ / Ako zosúladiť spodný riadok v flex box bez toho, aby ste ovplyvnili ostatné? - css, flexbox

Ako zosúladiť dolný "riadok" v flex box bez toho, aby ste ovplyvnili ostatné? - css, flexbox

Mám problém. Mám tabuľku, ktorú som implementoval vo flexboxe. Chcem urobiť spodný "riadok" zarovnaný bez ovplyvnenia medzery ostatných riadkov. (Dal som "riadok" v úvodzovkách, pretože technicky to nie je riadky, je to posledná bunka v troch rôznych stĺpcoch)

Tu je screenshot toho, čo chcem dosiahnuť: návrh, ktorý sa snažím implementovať

Tu je JSFiddle toho, čo som doteraz. Myslel som, že by to mohol urobiť, ale zdá sa, že nie je:

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

Mám dva hlavné problémy - získanie buniek "Pozri viac" na zarovnanie a rozšírenie vertikálnych ohraničení na rovnakú dĺžku vo všetkých stĺpcoch.

Nie je to možnosť používať flex rows namiesto flex stĺpcov kvôli spôsobu, akým sa to musí zrútiť v mobile.

Dúfam, že niekto môže poradiť, ako to môžem dosiahnuť pomocou flexboxu. Skúsil som rôzne atribúty flex s malým úspechom.

odpovede:

1 pre odpoveď č. 1

Musíte nastaviť kontajner stĺpcov (# top-buys) na zobrazenie: flex; aby všetky 3 stĺpce mali rovnakú výšku.

Akonáhle to urobíte, môžete upraviť obsah stĺpca, takže nie sú všetky rozmiestnené z medzery medzi nastavením

Ak pridáte flex-rast: 0; na div.new-region-page a.read-viac to bude tlačiť na dno.