본문 바로가기

나의 FE피봇이야기/HTML || CSS

[fit-content] 자식 요소들로 heigtht / width 맞추기

1. 부모가 자식width만큼 : 자식요소로 width와 height를 맞추고 싶을 때 사용하는 것.

2. 각 자신에게 사이즈를 맞출때 : 각 자신의 요소가 다른때 거기게 맞춰서 배경색을 넣을 경우 => 참조 예시 https://codepen.io/daleseo/pen/WNjQKxp

 

 

다만 이번에 제가 클론 코딩을 하면서 배운 점은

자식요소의 width을 그대로 반영하고 싶을때 사용

상황 : ul >li*{$} >a 가 있는데 여기서 Ul에 사이즈를 만들고 싶지 않을때.

사용 이유 : Ul+flex에 line indicator를 사용하고 싶어서

 

As-is => ul style.width : fit-content

 

 

To-be => ul style.width : fit-content(deleted)