flexbox中的等高自舉卡片

Question

我正在使用卡組的flex卡盒問題是我想要使用.card類的flex項目div應該保持相同高度，如果.card-block.p中的文字在一張卡片中增加卡的其餘高度也隨着卡的增加而增加。

這裏是我的小提琴：https://jsfiddle.net/a2d758jg/

.card-group { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    max-height: 475px; 
 
    background-color: lightgrey; 
 
} 
 

 
.card img { 
 
    width: 100%; 
 
} 
 

 
.card { 
 
    background-color: cornflowerblue; 
 
    width: 30%; 
 
    margin: 0px; 
 
    flex: 2; 
 
    border: 1px solid lightgrey; 
 
} 
 

 
.card-block { 
 
    padding: 10px; 
 
    background-color: #fff; 
 
} 
 

 
.card-title { 
 
    font-size: 18px; 
 
    color: grey; 
 
    font-family: verdana, sans; 
 
} 
 

 
.card-footer { 
 
    padding: 15px; 
 
    border-top: 1px solid lightgrey; 
 
    background-color: lightgrey; 
 
}

<div class="container"> 
 
    <div class="card-group"> 
 
    <div class="card"> 
 
     <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
     </div> 
 
     <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional 
 
      content.</p> 
 
     </div> 
 
     <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
 
     </div> 
 
     <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

打四個調整你的代碼：

.card-group { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    /* max-height:475px; <-- remove */ 
 
    background-color: lightgrey; 
 
} 
 

 
.card img { 
 
    width: 100%; 
 
} 
 

 
.card { 
 
    background-color: cornflowerblue; 
 
    width: 30%; 
 
    margin: 0px; 
 
    flex: 2; 
 
    border: 1px solid lightgrey; 
 
    display: flex;   /* new */ 
 
    flex-direction: column; /* new */ 
 
} 
 

 
.card-block { 
 
    padding: 10px; 
 
    background-color: #fff; 
 
    flex: 1;    /* new */ 
 
} 
 

 
.card-title { 
 
    font-size: 18px; 
 
    color: grey; 
 
    font-family: verdana, sans; 
 
} 
 

 
.card-footer { 
 
    padding: 15px; 
 
    border-top: 1px solid lightgrey; 
 
    background-color: lightgrey; 
 
}

<div class="container"> 
 
    <div class="card-group"> 
 
    <div class="card"> 
 
     <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
     </div> 
 
     <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional 
 
      content.</p> 
 
     </div> 
 
     <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
 
     </div> 
 
     <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

revised fiddle