フレックスで同じ高さのdivを持っている

Question

私はインラインにしたいブロックを持っていて、どれくらいのテキストがボックスに入っていても同じ高さを持っています。テキストの量はいつでも変更できます。ブロックはインラインですが、高さはすべて同じ高さにする方法を理解できません。

HTML：

<div class="article_block"> 
    <div class="article_block_content"> 
     <div class="article_block_content_left"> 
      <img class="article_image" alt="<%= headline %>" title="<%= headline %>" src="<%= media_path %>"/> 
     </div> 

     <div class="article_block_content_right"> 
      <h5 class="article-tag"><%= category.name %></h5> 
      <h2 class="article-title"><%= headline %></h2> 
      <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4> 
     </div> 
    </div> 
</div> 

はCSS：

.article_block { 
    width: 33%; 
    display: inline-flex; 

    .article_block_content{ 
     margin: 10px; 
     height: inherit; 

     .article_block_content_left { 

     } 
     .article_block_content_right { 
     padding: 20px; 

     .article-tag { 
      text-align: center; 
      color: #7d8a8f; 
      text-transform: capitalize; 
      font-size: 14px; 
      font-family: 'Open Sans'; 
      padding-top: 15px; 
     } 
     .article-title { 
      text-align: center; 
      font-family: 'Merriweather'; 
      color: #333; 
     } 
     .article-subtitle { 
      text-align: center; 
      font-family: 'Merriweather'; 
      font-style: italic; 
      color: #464849 
     } 
     } 
    } 
    } 

これはあなたの.article-blockのdivの親に

Answer 1

設定display: flexを何が起こっているのか、現在あります。これにより、3つの.article-block divsが同じ高さに維持されます（align-itemsのデフォルト値はstretchなので）。

* { box-sizing: border-box; } 
 

 
.article-block-wrap { 
 
    display: flex; 
 
    margin: 0 -10px; 
 
} 
 

 
.article_block { 
 
    padding: 5px; 
 
    display: flex; 
 
    flex: 0 0 33.333%; 
 
    overflow: hidden; 
 
} 
 

 
.article_block_content{ 
 
    background: rgba(0,0,0,0.2); 
 
} 
 

 
.article_block_content_left { 
 
    text-align: center; 
 
} 
 

 
.article_block_content_right { 
 
    padding: 20px; 
 
} 
 

 
.article-tag { 
 
    text-align: center; 
 
    color: #7d8a8f; 
 
    text-transform: capitalize; 
 
    font-size: 14px; 
 
    font-family: 'Open Sans'; 
 
    padding-top: 15px; 
 
} 
 

 
.article-title { 
 
    text-align: center; 
 
    font-family: 'Merriweather'; 
 
    color: #333; 
 
} 
 

 
.article-subtitle { 
 
    text-align: center; 
 
    font-family: 'Merriweather'; 
 
    font-style: italic; 
 
    color: #464849 
 
}

<div class="article-block-wrap"> 
 

 
    <div class="article_block"> 
 
    <div class="article_block_content"> 
 
     <div class="article_block_content_left"> 
 
      <img class="article_image" src="https://placekitten.com/150/275"/> 
 
      </div> 
 

 
      <div class="article_block_content_right"> 
 
      <h5 class="article-tag">Category Name</h5> 
 
      <h2 class="article-title">This is a long headline</h2> 
 
      <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="article_block"> 
 
    <div class="article_block_content"> 
 
     <div class="article_block_content_left"> 
 
      <img class="article_image" src="https://placekitten.com/150/300"/> 
 
      </div> 
 

 
      <div class="article_block_content_right"> 
 
      <h5 class="article-tag">Category Name</h5> 
 
      <h2 class="article-title">This is a much longer headline than either the first or third block</h2> 
 
      <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="article_block"> 
 
    <div class="article_block_content"> 
 
     <div class="article_block_content_left"> 
 
      <img class="article_image" src="https://placekitten.com/150/250"/> 
 
      </div> 
 

 
      <div class="article_block_content_right"> 
 
      <h5 class="article-tag">Category Name</h5> 
 
      <h2 class="article-title">This is a slightly longer headline</h2> 
 
      <h4 class="article-subtitle"> 
 
       This is the future home of the article headline. I hope this makes you want to read the article. 
 
       This is the future home of the article headline. I hope this makes you want to read the article. 
 
      </h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 
     
 
</div><!-- .article-block-wrap -->