ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [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;

     

     

     

    반응형

    댓글

Designed by Tistory.