-
[CSS] flex: 1이란CSS 2022. 9. 14. 20:31
flex: 1을 사용할 때마다 헷갈려가지고 매번 구글에 검색하였다.
이 의미에 대해 확실히 이해하고자 쓴다!
flex
flex-grow, flex-shrink, flex-basis를 한 번에 사용하는 단축 속성
flex: 1 === flex: 1 1 === flex: 1 1 0
flex: 1은 flex: 1 1, flex: 1 1 0과 같다.
즉, 아래와 같다.
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
flex-grow
[기본값] flex-grow: 0;
0 : 부모의 너비가 남을 경우에도 해당 아이템의 기본 너비를 유지한다.
1 : 부모의 너비가 남을 경우 너비를 채운다.
flex-shrink
[기본값] flex-grow: 1
0 : 부모의 너비가 해당 아이템보다 작아져도 크기가 줄어들지 않는다.
1 : 부모의 너비가 해당 아이템보다 작아지면 부모의 너비에 맞추어 줄어든다.
flex-basis
[기본값] flex-basis: auto (컨텐츠 너비를 뜻함)
해당 아이템의 기본 너비를 지정한다.
0 : 해당 아이템이 부모의 너비에 따라 결정하게 된다.
따라서 flex: 1은
flex-basis가 0이니까 부모의 너비에 맞추게 된다.
따라서 부모의 너비가 남을 경우 그 공간을 채우고, 부모가 해당 아이템의 너비보다 작아졌을 때 줄어들게 된다.
flex는
- flex-grow를 제외한 속성을 생략할 수 있다.
- flex에서 flex-basis를 생략하면 0이 된다.
- px,% 등 단위를 적으면 flex-basis에 적용된다.
따라서 flex: 1은 flex-grow: 1인데 flex-basis의 값을 생략하였으니 그 값은 0이 되어 아래와 같은 결과를 같게 된다.
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
반응형'CSS' 카테고리의 다른 글
[CSS] 창 축소 시 요소 짤림 해결 (0) 2023.03.13 [CSS] 이미지 Layout Shift 방지 (0) 2022.10.26 [CSS] non-boolean attribute warning (0) 2022.09.04 [CSS] gradient transition 적용하기 (React) (0) 2022.07.26 [CSS] 자동 완성 시 input 배경색 변경 (0) 2022.07.15