.card-desc 문단 크기만큼 높이 조정하기 질문있습니다.
320
작성한 질문수 4
각 문단의 길이에 따라 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 자체도 플렉스 컨테이너가 되었다는 것에 포인트를 맞추시면 이해하실 수 있을 거에요^^
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
120
1
수업자료 다운로드
0
123
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
138
1
css grid repeat() 에서 autofit 사용시
0
184
1
menu 아이템 반응형 변경
0
102
1
질문은 아니고.. 오타 발견..
0
122
1
웹에서 위치?값
0
212
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
511
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
310
1
flex-basis auto, 0 차이
0
711
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
609
1
animation forwards 관련 질문
0
489
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
560
1
flex-grow IE 질문드립니다.
0
625
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
437
1
Grid 수직정렬 문의
0
1076
1
card__item에 display:flex를 했을 때..
0
513
1
11vmin
0
420
1
header class 안에 div와 h2
0
577
1
grid 반응형 페이지 step1 질문있습니다~
0
282
1
반응형 페이지 step4 order
0
358
1
미디어쿼리 사이즈
1
288
1
figure + div
0
302
1
CSS Grid를 통한 정렬의 장점
0
249
1