同じクラスのDivは異なるコンテンツに調整されます

Question

私は3つのdivを横に並べています。彼らは同じクラスと同じ構造を持っていますが、その内容は、特に長さが異なります。 私の問題は、すべての3つのdivが、個々のコンテンツに調整するのではなく、「最長」のコンテンツの高さを取ることです。ここで

は私のHTMLです：

<main class="content"> 
<div class="column last-match">      
    <div class="image-wrapper"> 
    <a href="#"><img src="default_thumbnail.jpg"/></a> 
    </div> 
    <div class="text-wrapper"> 
    <a class="heading" href="#"><p class="heading">A Heading</p></a> 
    <p class="post-excerpt">Some text</p> 
    <a href="#" class="button read-more">Read More</a> 
    </div> 
</div> 
<div class="column last-match">      
    <div class="image-wrapper"> 
    <a href="#"><img src="default_thumbnail.jpg"/></a> 
    </div> 
    <div class="text-wrapper"> 
    <a class="heading" href="#"><p class="heading">A Heading</p></a> 
    <p class="post-excerpt">Some text that's longer</p> 
    <a href="#" class="button read-more">Read More</a> 
    </div> 
</div> 
<div class="column next-matches"> 
    <div class="image-wrapper"> 
    <img src="next_matches.jpg"/> 
    </div> 
    <div class="text-wrapper"> 
    <p class="heading">List Heading</p> 
    <ul class="match-list"> 
    <li class="match">some list item</li> 
    <li class="match">some list item</li> 
    </ul> 
    </div> 
</div> 
</main> 

そして、基本的なCSS：

.content { 
    display: flex; 
    flex-wrap: nowrap; 
} 

.column { 
    display: flex; 
    flex-direction: column; 
    margin: 60px 20px; 
    min-height: 100px; 
    width: 33%; 
} 

.image-wrapper { 
    width: 100%; 
    height: 260px; 
    overflow: hidden; 
} 

.image-wrapper img { 
    width: 100%; 
    height: auto; 
} 

.post-excerpt { 
    margin-bottom: 20px; 
} 

.button { 
    display: block; 
    float: left; 
    margin-bottom: 20px; 
    padding: 10px; 
} 

.match { 
    font-size: 1em; 
    padding-top: 15px; 
} 

ここJSFiddleに私のコードです：https://jsfiddle.net/4h0g73sp/5/

あなたが見るように、列は高さがかかりますその中に最大のテキストを持つもの。私が望むのは、彼らがコンテンツに合わせて、必要に応じて異なる高さになるようにすることです。

私はそれが注目に値するかどうか、私はWordpressで働いているので、これらの列は元々いくつかのPHPの中にあります。それが重要であれば、私はコードをあなたと共有することができますので、私に知らせてください:)

Answer 1

フレックスコンテナのalign-itemsはデフォルトでstretchになるので、フレックスアイテムは最も高いアイテムの高さ。

は単にflex-startそれが

チェックhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/は、それは非常にです宣言する必要はありませんので、デフォルトでは何のラップではありませんので、私はまた.contentからflex-wrapを削除した

.content { 
    display: flex; 
    align-items: flex-start; 
} 

https://jsfiddle.net/4h0g73sp/9/

に設定しました便利でフレックスを実証する