Richten Sie ein Element auf der Mitte der Unterseite jeder flexbox

Question

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

Der Inhalt in diesen divs sind von unterschiedlicher Höhe, aber was ich möchte, ist eine Verknüpfung in jeder, die immer an der Unterseite positioniert ist.

----------- ----------- ----------- 
| img | | img | | img | 
| heading 1 | | heading 3 | | heading 3 | 
| paragraph | | paragraph | | paragraph | 
| paragraph | |   | | paragraph | 
|   | |   | | paragraph | 
| link | | link | | link | 
----------- ----------- ----------- 

Auf diese Weise werden die Links immer aufgereiht angezeigt.

JSFiddle code

Answer 1

Hier sind zwei Methoden:

Nested Flexbox

.col { 
    flex: 1; 
    display: flex;     /* create nested flex container */ 
    flex-wrap: wrap;    /* enable flex items to wrap */ 
    justify-content: center;  /* center flex items on each line */ 
} 

.col > a { align-self: flex-end; } /* position link always at bottom */ 

DEMO 1

---

absolute Positionierung

.col { 
    flex: 1; 
    position: relative;  /* establish containing block (nearest positioned ancestor) 
           for absolute positioning */ 
} 

.col > a { 
    position: absolute; 
    bottom: 5px;     /* adjust this value to move link up or down */ 
    left: 50%;     /* center link horizontally */ 
    transform: translateX(-50%); /* center link horizontally */ 
} 

DEMO 2

---

Ein drittes Verfahren beinhaltet die flex-directioncolumn zu schalten. 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.)

Answer 2

Sie konnten die display von .content-flex ändern, dann flex-direction: column, um den Inhalt Fluss von oben nach unten hinzufügen zu machen. Um das Kind Ankerelement am Boden zu positionieren, fügen Sie einfach hinzufügen margin-top: auto es:

Updated Example

.content { 
    display: flex; 
    flex-direction: column; 
} 
.content a { 
    margin-top: auto; 
}