列方向のすべてのフレックスアイテムで均等に高さを伸ばす方法は？

Question

私はフレックスアイテム.itemとflex-direction: columnを持っており、それぞれの子供アイテム（.item__title、.item__description）に最高のものに応じて等しい垂直スペースを取らせたいと思います。次のアイテムは同じ新しい行から始まります。私は、次のコードをしようとして」：

<article class="items"> 
<section class="item"> 
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2> 
    <p class="item__description">Lorem ipsum dolor sit amet.</p> 
    <a class="item__more-button">See more</a> 
</section> 
<section class="item"> 
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2> 
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
     incididunt ut labore et dolore magna aliqua.</p> 
    <a class="item__more-button">See more</a> 
</section> 
<section class="item"> 
    <h2 class="item__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
     incididunt</h2> 
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
     incididunt ut labore et dolore magna aliqua.</p> 
    <a class="item__more-button">See more</a> 
</section> 
</article> 


    .items { 
    display: flex; 
    } 

    .item { 
    margin: 0 15px; 
    width: calc((100% - 2 * 15px)/3); 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    } 



    .item__title { 
     flex: 1; 
    } 

    .item__description { 
     flex: 1; 
    } 

しかし、私はそれがこの絵のようになりたい：

どのように私は、これは高さを設定せずに行うことができますか？

Answer 1

同じheigthを持つ親セクションのdisplay:gridでgrid-auto-rows: 1frを使用して試してみて、子セクションのために100％に幅を設定することを忘れないでください。それ以外の場合は、あなたが望むものを与えることはありません。 https://jsfiddle.net/e63k17na/1/

だけ」である、サブクラスに同じロジックを適用します。私はあなたがこのような何かをしたいと考えているスクリーンショットを見た後

：https://jsfiddle.net/e63k17na/

UPDATE：jsfiddleデモ作業

この場合は「アイテム」となります。 *タイトル*または*説明*高さが動的である場合

.items{ 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 1fr; 
    text-align:center; 
    } 

.item{ 
    display: grid; 
    grid-template-columns: repeat(1, 1fr); 
    grid-auto-rows: 1fr; 
} 

Answer 2

justify-contentを追加するだけです。あなたのアイテムのクラスに、 あなたのセクションでは、すでに

.items { 
 
    display: flex; 
 
    } 
 

 
    .item { 
 
    margin: 0 15px; 
 
    width: calc((100% - 2 * 15px)/3); 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: space-between; 
 

 
} 
 
.item.__title{ 
 
flex:1; 
 
} 
 
.item.__description { 
 
     flex: 1; 
 
    }

<article class="items"> 
 
<section class="item"> 
 
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2> 
 
    <p class="item__description">Lorem ipsum dolor sit amet.</p> 
 
    <a class="item__more-button">See more</a> 
 
</section> 
 
<section class="item"> 
 
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2> 
 
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     incididunt ut labore et dolore magna aliqua.</p> 
 
    <a class="item__more-button">See more</a> 
 
</section> 
 
<section class="item"> 
 
    <h2 class="item__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     incididunt</h2> 
 
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     incididunt ut labore et dolore magna aliqua.</p> 
 
    <a class="item__more-button">See more</a> 
 
</section> 
 
</article>