Verankerung Element nach unten in Flexbox Layout

Question

Ich versuche zu zentrieren und verankern meine .button-cont Element auf den Boden seines Behälters von 30px, .card-info.

Ich habe versucht, .card-info zu flex-direction: column und align-items/align-content: flex-end, die margin-top: 0 Verfahren und absolute Positionierung Einstellung, aber keiner arbeitete.

Ich bin neu zu flexbox und habe ein verschachteltes Layout gebaut, so dass es sich als schwierig erweist.

HINWEIS: Ich habe .card eine feste Höhe angegeben, um das Verhalten meiner App zu simulieren, das dynamisch über jQuery erfolgt. Ich denke, das ist Teil der Herausforderung.

.events-row { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.events-row .card { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-basis: 31.3%; 
 
    position: relative; 
 
    height: 1200px; 
 
} 
 
.events-row .card .card-img { 
 
    position: relative; 
 
} 
 
.events-row .card .card-info { 
 
    flex-grow: 1; 
 
    position: relative; 
 
    padding: 15px; 
 
    background-color: grey; 
 
    text-align: left; 
 
    font-size: 1rem; 
 
    color: white; 
 
} 
 
.events-row .card .card-info .button-cont .button { 
 
    display: inline-block; 
 
    margin: 30px; 
 
    border: 1px solid white; 
 
    padding: 10px 30px; 
 
    font-size: 1em; 
 
}

<div class="events-row"> 
 
    <div class="card"> 
 
    <div class="card-img four-three-img"> 
 
     <a href="#"> 
 
     <img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /> 
 
     </a> 
 
    </div> 
 
    <div class="card-info"> 
 
     <h2>Event title</h2> 
 
     <h3>Event date</h3> 
 
     <h3>Event venue</h3> 
 
     <p> 
 
     Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
 
     </p> 
 
     <div class="button-cont"> 
 
     <div class="button purple-button">Buy Tickets</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-img four-three-img"> 
 
     <a href="#"> 
 
     <img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /> 
 
     </a> 
 
    </div> 
 
    <div class="card-info"> 
 
     <h2>Event title</h2> 
 
     <h3>Event date</h3> 
 
     <h3>Event venue</h3> 
 
     <p> 
 
     Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
 
     </p> 
 
     <div class="button-cont"> 
 
     <div class="button purple-button">Buy Tickets</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Demo: http://codepen.io/ourcore/pen/NdavvY

Answer 1

Ich habe versucht .card-info zu flex-direction: column Einstellung ...

Vielleicht haben Sie, aber habe nicht alle erforderlichen Schritte.

Momentan haben Sie flex-direction: column auf dem Eltern von .card-info, das das übergeordnete Element von .button-cont ist. Daher ist .button-cont nicht einmal ein Flex-Element.

Machen Sie .card-info einen flexiblen Container, dann können Sie die Flex-Eigenschaften auf .button-cont anwenden.

Fügen Sie diese auf Ihren Code:

.card-info { 
    display: flex; 
    flex-direction: column; 
} 
.button-cont { 
    margin-top: auto; 
    align-self: center; 
} 

revised codepen