인프런 커뮤니티 질문&답변
작성한 질문수
.card-desc 문단 크기만큼 높이 조정하기 질문있습니다.
작성
·
269
1
각 문단의 길이에 따라 card-desc의 높이가 달라지는 문제를 해결하는 부분이 이해가 잘 안됩니다.
1. 각각의 .card-item을 flex container로 만들고 .card-image와 .card-desc가 flex item이 된다.
2. card-item의 정렬 방향을 column으로 바꾼다.
3. .card-desc의 flex 속성을 1 1 auto를 준다.
flex-grow 에 1을 주므로써 문단의 길이에 맞게 유연하게 늘리는 거잖아요? 근데 카드는 각각 개별 아이템이니까 개별 아이템이 갖고 있는 문단의 길이에 따라 달라야되는것 아닌가요? ㅠㅠ 어떻게 같은 행의 문단이 같은 높이로 늘어날 수 있는거죠 ?
답변 2
1
.card-list가 플렉스 컨테이너가 되면 이 컨테이너의 align-items 속성값이 기본적으로 stretch로 되어있기 때문에, 각각의 card-item들은 높이가 동일하게 늘어나게 됩니다. 이 상태에서 다시 card-item이 플렉스 컨테이너가 되면 card-desc도 card-item의 높이에 맞춰 늘어날 수 있는 것이죠.
0
잘 보시면 .flex-item 자체에도 display: flex가 적용되어서
.flex-item 스스로도 플렉스 컨테이너의 역할을 하고 있습니다.
.flex-item의 flex-direction이 column이므로 상하로 배치가 되고,
그 아이템들에는 flex-grow: 1이 설정되어서 세로 방향으로 늘어나는거죠~
.flex-item 자체도 플렉스 컨테이너가 되었다는 것에 포인트를 맞추시면 이해하실 수 있을 거에요^^