열 방향으로 모든 플렉스 아이템에 높이를 똑같이 늘리는 방법은 무엇입니까?

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

은 부모 섹션 display:grid으로 grid-auto-rows: 1fr를 사용하여 시도하고 하위 섹션 100 %로 폭을 설정하는 것을 잊지 마세요 같은 heigth에게 있습니다. 그렇지 않으면 당신이 원하는 것을 당신에게주지 않을 것입니다.

근무 jsfiddle 데모 : https://jsfiddle.net/e63k17na/

UPDATE : https://jsfiddle.net/e63k17na/1/

그냥 "입니다 서브 클래스에 같은 논리를 적용

내가 당신을 믿지 스크린 샷을보고 한 후 이런 식으로 뭔가 원하는 항목 "이 표시됩니다.

.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를 추가하십시오 : space-between; 당신의 품목 클래스에, 당신의 섹션은 이미

.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>