CSS flex box 사용시 크기가 줄어드는 이유?

Question

제목엔 flex box라고 했지만 정확하게는 justify-content와 align-items사용시 내부 자식요소의 이미지 크기가 줄어드는 이유가 궁금합니다.아이콘에 justify-content와 align-items 사용시-justify-content와 align-items 미사용시-유튜브 로고와 검색창을 제외한 나머지 아이콘에 flex box와 justify-content와 align-items 를 사용해서 중앙정렬을 하려고했습니다.각 아이콘은 img 요소에 svg 파일로 되어있으면 svg는 24x24 크기입니다.사진의 제일 왼쪽 네비게이션 버튼처럼 마우스 오버시 나타나는 아이콘을 감싼 둥근 원이 36x36 크기입니다.그러니까 justyfy와 align-items 미사용시 36x36로 나타나고 사용시 24x24로 나타납니다.저는 24 크기로 나타내는게 제 의도긴 하나 궁금한 것은 중앙정렬 속성을 사용할땐 24크기로 나타나고 사용하지 않을때는 마우스 오버를 위해 이미지를 감싸고있는 요소만큼 이미지 크기가 변하는지궁금합니다.코드입니다..

/* navi, mic, create, alram */ .icon-group { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; margin: 0 12px; } .icon-group:hover { border-radius: 100%; background-color: rgb(219, 219, 219); } .nav-icon { display: flex; justify-content: center; align-items: center; } /* create, alarm, profile*/ .user-container { display: flex; margin-right: 52px; }

baeharam · Answer

align-items 의 기본값은 normal 인데 만약 flex item 을 렌더링하는 경우에는 stretch 속성으로 동작합니다. 즉, flex item 의 크기가 flex container 의 크기보다 작다면 남은 영역을 채우도록 확장됩니다.따라서, 해당 아이콘 이미지는 해당속성을 사용할 때 확장되고 사용하지 않을 땐 고유의 크기인 24x24 를 유지하는 것입니다

CSS flex box 사용시 크기가 줄어드는 이유?

1개의 답변

기술 목록