フレックスボックスの一番下に合わせる

Question

コンテンツに応じて高さを動的に変更する必要があるコンテナがあります。特定の行のすべてのコンテナについて、各コンテナの内容にかかわらず、下のテキストはすべて下に固定する必要があります。

.flex-list { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.flex-list .flex-row { 
 
    display: flex; 
 
    margin-bottom: 20px; 
 
} 
 
.flex-list .flex-row .flex-item-wrapper { 
 
    margin-right: 20px; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 
.flex-list .flex-row .flex-item-wrapper:last-child { 
 
    margin-right: 0px; 
 
    background-color: transparent; 
 
} 
 
.flex-list .flex-row .flex-item-wrapper .flex-item { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.flex-item-stats { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    color: grey; 
 
    padding-top: 10px; 
 
} 
 
.flex-item-stats > * { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.caption { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<div class="profile-content flex-list"> 
 
    <div class="flex-row"> 
 
    <div class="flex-item-wrapper"> 
 
     <div class="flex-item thumbnail clickable" data-href="#"> 
 
     <img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px"> 
 
     <div class="caption"> 
 
      <h4> 
 
       <a href="#">Y-find</a> 
 
       </h4> 
 
      <div class="flex-item-stats"> 
 
      <small>left</small> 
 
      <small>right</small> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-item-wrapper"> 
 
     <div class="flex-item thumbnail clickable" data-href="#"> 
 
     <img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px"> 
 
     <div class="caption"> 
 
      <h4> 
 
       <a href="#">Cardguard Namfix</a> 
 
       </h4> 
 
      <div class="flex-item-stats"> 
 
      <small>left</small> 
 
      <small>right</small> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-item-wrapper"> 
 
     <div class="flex-item thumbnail clickable" data-href="#"> 
 
     <img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px"> 
 
     <div class="caption"> 
 
      <h4> 
 
       <a href="#">Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch </a> 
 
       </h4> 
 
      <div class="flex-item-stats"> 
 
      <small>left</small> 
 
      <small>right</small> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-item-wrapper"> 
 
    </div> 
 
    </div> 
 

 
</div>

は私が下へ flex-item-statsをプッシュするために働くだろう space-betweenとともに .captionに display:flexを使用して思ったが、それは何をやっているようには見えません。利用できる高さを埋めるために .caption要素を伝え、その後

.flex-list .flex-row .flex-item-wrapper .flex-item { 
    width: 100%; 
    height: 100%; 
    display: flex;      /* new */ 
    flex-direction: column;    /* new */ 
} 

：

.caption { flex: 1; } 

Revised Fiddle

それはだあなたが親にフレックスコンテナを作成する必要があり

jsfiddle

Answer 1

共通のクエストイオン。ここでは、他のフレックスオプションは次のとおりです。

• Methods for Aligning Flex Items
• Flexbox align to bottom
• Align content of flex items to bottom
• Flexbox difficulties aligning icons to bottom of container
• Equal height columns and align last item to bottom
• Pin element (flex item) to bottom of container
• Aligning items to the bottom using flex
• Nested flexbox, align-items do not flex-end
• align-content: flex-end not shifting elements to container bottom
• Why isn't align-self aligning my div to the bottom of my flexbox?

Answer 2

あなたはあなたに.captionコードを変更した場合：

.caption { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 

、その後、追加します。

.flex-item { 
    display: flex; 
    flex-direction: column; 
}