フレックスボックスレイアウトの下に要素を固定する

Question

私の.button-cont要素を30pxのでコンテナの中央に配置して固定しようとしています。

私はflex-direction: columnとalign-items/align-content: flex-end、margin-top: 0方法、および絶対位置に.card-infoを設定しようとしましたが、どれも働きました。

私はフレックスボックスに新しくなり、ネストされたレイアウトを構築しているので、それは困難であることが証明されています。

注：.cardは、アプリの動作をシミュレートするために固定高さを与えています。これはjQueryを使用して動的に発生します。私はこれがチャレンジの一部だと思います。

.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>

デモ：私はflex-direction: columnに.card-infoを設定しようとしましたhttp://codepen.io/ourcore/pen/NdavvY

Answer 1

...

はたぶん、あなたはでしたが、すべての必要をしていませんステップ。

現在.card-infoの親にflex-direction: columnがあります。これは.button-contの親です。したがって、.button-contはフレックスアイテムでもありません。

.card-infoをフレックスコンテナにすると、flexプロパティを.button-contに適用できます。

あなたのコードにこれを追加します。

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

revised codepen