• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

.card-desc 문단 크기만큼 높이 조정하기 질문있습니다.

20.04.14 19:19 작성 조회수 145

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

스위토피님의 프로필

스위토피

2020.05.10

.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 자체도 플렉스 컨테이너가 되었다는 것에 포인트를 맞추시면 이해하실 수 있을 거에요^^