과제를 진행하다가 아래와 같은 UI를 구현하게 되었다.
하지만, 각각의 요소들이 content 영역만큼 width를 가지지 않고 부모의 width를 따라가도록 구현이 되었다.
그 이유는 flex로 선언되면 자식의 width는 부모의 width를 따라간다는 특성 때문이었다.
display를 flex가 아닌 inline-flex로도 바꿔보고 했지만, 당최 바뀌지 않았다.
width를 max-content로 두면 해결된다는 글을 보고 각각의 요소의 width를 max-content로 두었는데! 원하던 대로 구현이 되었다.
width : max-content;max-width를 사용하는 것은 본 적이 있는데 max-content라는 속성 값은 처음 보는 것 같았다.
max-content: 자기 영역만큼을 width로 가짐
min-content: 자동 개행을 사용하여 자기자신이 가질 수 있는 최소 너비
fit-content: 자기 영역을 온전히 보존할 수 있으면 max-content의 성질을, 자기 영역을 보존할 수 없으면 min-content만큼 width를 가짐. min-content 보다 적은 width로 줄어들지는 않음
참고 자료
Frontend🍓