[CSS] Flex Sizing (flex 크기 변경)

이번에는 flex 컨테이너 내의 아이템들의 사이즈를 반응형으로 변경하는 일부 CSS 속성들에 대해 정리하겠습니다.

 

 

기본 Flex 컨테이너 생성

Flex Container

<div class="container">
    <div>
        Home
    </div>
    <div>
        About
    </div>
    <div>
        Contact Us
    </div>
    <div>
        The Best Programmer In The World
    </div>
</div>

 

 

style.css

.container{
    display: flex;
    gap: 10px;
}

.container > *{
    border: 5px solid black;
}

 

우선 테스트해볼 flex 적용 컨테이너를 만들어주었습니다.

해당 컨테이너에는 4개의 각각 다른 내용들이 들어있는 아이템들이 있습니다.

gap 10px을 넣어 사이의 간격을 넣어주었고, border 속성을 통해 외각선을 넣어주었습니다.

flex로 컨테이너를 설정해주었기 때문에 이 상태에서 창을 줄이면 반응형으로 크기가 자동으로 줄어들게됩니다.
또한, 기본적으로 flex 를 설정하게 되면 아이템의 내용에 따라 크기가 자동적으로 가변적이게 적용됩니다.

 

 

 

width 속성

.container > *{
    width: 100px;
    border: 5px solid black;
}

width 속성을 사용하여 이렇게 수동으로 컨테이너 안의 아이템들의 너비를 100px 로 지정해줄 수 있습니다.

 

 

 

flex-basis 속성

.container > *{
    width: 100px;
    flex-basis: 200px;
    border: 5px solid black;
}

width 속성과 마찬가지로 flex-basis 속성을 사용하면 컨테이너 안의 아이템들의 너비를 지정해줄 수 있습니다.
동작 자체는 width와 별반 차이는 없으며, 중요한 것은 width 속성보다 우선순위가 높아 같이 적용하게 되면 width 속성은 무시되고 flex-basis 속성이 적용됩니다.

 

 

max-width 속성

.container > *{
    flex-basis: 200px;
    max-width: 100px;
    border: 5px solid black;
}

max-width를 적용하면 최대의 너비를 지정해줄 수 있습니다.
위의 예시 코드를 보게되면 flex-basis 속성을 적용하여 아이템들의 너비를 200px로 만들어주었는데 max-width를 100px로 지정하였습니다.
이는 최대 너비가 현재 기본으로 설정된 너비보다 작다는 의미인데 이렇게 되면 우선 순위가 max-width가 flex-basis 보다 높기 때문에 아이템들의 너비가 max-width의 100px로 지정되게 됩니다.

그렇다면 flex-basis를 50px로 주게 된다면 어떻게 될까요?

 

.container > *{
    flex-basis: 50px;
    max-width: 100px;
    border: 5px solid black;
}

이 경우 max-width가 100px이고 우선 순위가 높다고는 하지만 기본적인 특성상 최대의 크기를 지정해주는 것이기 때문에 기본적인 처음 크기는 flex-basis의 50px를 따라가게 됩니다.

 

 

 

min-width 속성

min-width의 경우에도 max-width와 동일합니다.
단지 반대의 케이스라고 보면 됩니다.

.container > *{
    flex-basis: 200px;
    min-width: 300px;
    border: 5px solid black;
}

 

flex-basis에 200px을 지정하고 min-width 최소 너비를 300px 로 지정했다면, 최소 너비인 300px을 따라가게 됩니다.

 

 

.container > *{
    flex-basis: 200px;
    min-width: 100px;
    border: 5px solid black;
}

min-width 최소 너비를 100px로 지정했으면, 우선 순위가 높다고 하더라도 최소로 줄일 수 있는 너비를 예약해 놓는 것일 뿐이지 현재 적용될 너비는 flex-basis를 따라가서 200px 의 너비를 부여받게 됩니다.

 

 

flex-grow / flex-shrink 속성

.container > *{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
    border: 5px solid black;
}

flex-grow와 flex-shrink는 아이템들이 창을 줄였을 때 어떻게 반응될 것인지 좀 더 자세하게 반응할 수 있게끔 해주는 속성입니다.
위와 같이 0으로 지정해주었다면 창을 아무리 줄여도 아이템들의 크기가 줄어들지도 않고 반응하지도 않은 채 창 밖으로 그대로 넘어가게 됩니다.

 

 

.container > *{
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 0;
    border: 5px solid black;
}

flex-grow를 1로 지정했으면 100px로 지정된 아이템들이 공통적으로 동일한 크기로 넓어지면서 창의 왼쪽 끝부터 오른쪽 끝까지 동일한 크기로 채워지게 됩니다.
이 상태에서 창을 줄이면 최대 각 아이템들의 기본 너비인 100px 까지 줄어들면서 그 이상으로 창이 줄어들어질 경우 창을 벗어나게 됩니다.

 

.container > *{
    flex-basis: 100px;
    flex-grow: 0;
    flex-shrink: 1;
    border: 5px solid black;
}

flex-shrink를 1로 지정했으면 아이템들은 100px의 너비를 가진 상태에서 창을 줄이게 될 때, 지정한 최소 너비까지 줄어들게 되고 그 이상으로 줄이게 되면 창을 벗어나게 됩니다.
지금 위의 코드에는 최소 너비를 지정해주지 않았기 때문에 각 아이템들의 내용들의 최소 너비만큼 줄어들고 그 이상 창을 줄이면 벗어나게 됩니다.

 

 

 

.container > *{
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 1;
    border: 5px solid black;
}

만약 두 개 모두 1로 지정하면, 두 개의 특성을 모두 가지게 됩니다.
flex-grow가 1이므로 각 아이템들은 공통적으로 동일하게 창의 최대 너비를 채우게 됩니다.
flex-shrink가 1이므로 각 아이템들의 창을 줄일 때 각 아이템들의 최소 너비까지 줄어들게 되고 그 이상 줄어들면 창을 벗어나게 되는 것입니다.

 

 

.container > *{
    flex: 1 1 100px;
    border: 5px solid black;
}

위에서 일일히 적었던 flex-grow, flex-shrink, flex-basis 를 flex 속성 하나만으로 적용할 수 있습니다.
왼쪽부터 grow, shrink, basis 를 뜻합니다.

 

 

+ flex 크기 변경 속성에 대한 우선 순위

content width (내용의 고유 너비) < width (너비 속성) < flex-basis (flex basis 속성) < min-width/max-width (최소 너비 / 최대 너비)