[CSS] Flexbox 크기 제어 전략 : flex-basis, flex-grow, flex-shrink, width, max-width, min-width

Flexbox는 웹 개발자들이 레이아웃을 구성하는 데 매우 유용한 도구 중 하나입니다. 그러나 Flexbox를 처음 사용하는 사람들에게는 각 속성들의 역할과 상호작용이 혼란스러울 수 있습니다. 특히, 크기를 제어하는 데 사용되는 속성들인 flex-basis, flex-grow, flex-shrink, width, max-width, min-width의 차이점에 대해 이해하는 것은 중요합니다. 이러한 속성들을 올바르게 이해하는 시간을 가져보겠습니다.

 

flex-basis

플렉스(flex) 아이템(item)이 플렉스 컨테이너(container) 내에서 차지할 초기 크기를 지정합니다.

기본값은 auto이며, 해당 아이템의 너비(width)를 해당 아이템의 내용 또는 고정된 너비에 따라 결정합니다.

 

width

요소의 너비를 지정합니다.

만약 flex-basis가 지정되지 않았다면 width 속성이 적용됩니다.

.container {
  list-style: none;
  outline: 1px solid black;
  background-color: #fff;
  margin: 10px;
  width: 500px;
  height: 50px;
  display: flex;
  
  .item {
    width: 50px;
    height: 50px;
    flex-basis: auto; /* flex-basis 기본값 */

    &:nth-of-type(1){
      background-color: yellow;
    }
    &:nth-of-type(2){
      background-color: red;
    }
    &:nth-of-type(3){
      background-color: orange;
    }
  }
}

 

아이템들의 너비는 50px

 

 

flex-basis가 지정되어 있으면 width 값을 무시하고 flex-basis 값을 따릅니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
  }

 

아이템들의 너비는 100px

 

max-width

요소의 최대 너비를 지정합니다. 즉, 요소의 크기가 이 값을 초과할 수 없습니다.

max-width가 flex-basis 보다 작을 경우, max-width값에 의해 제한됩니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      max-width: 80px;
  }

 

아이템들의 너비는 80px

 

 

단순히 max-width가 flex-basis 보다 경우 어떤 값이 적용되는지 살펴보았습니다. flex-basis 값을 100px 적용하였고, max-width 값은 150px까지 될 수 있습니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      max-width: 150px;
  }

 

아이템들의 너비는 100px

 

 

flex-grow를 1로 설정하여 여유공간 만큼 .item 요소가 늘어나는 경우를 추가하면 너비값은 150px이 적용됩니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      flex-grow: 1;
      max-width: 150px;
  }

 

아이템들의 너비는 150px

 

min-width

요소의 최소 너비를 지정합니다. 즉, 요소의 크기가 이 값을 미만으로 줄어들지 않습니다.

min-width가 flex-basis 보다 클 경우, min-width 값이 적용됩니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      min-width: 120px;
  }

 

아이템들의 너비는 120px

 

 

 

min-width가 flex-basis 보다 작을 경우에도 살펴보겠습니다. flex-basis 값이 적용됩니다. 이 부분은 너무 당연한 결과입니다. 최소 너비값이 120px 이상이면 되기 때문입니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 150px;
      min-width: 120px;
  }

 

아이템들의 너비는 150px

 

 

flex-shrink : 0;

Flexbox 레이아웃에서 아이템이 축소되는 정도를 제어하는 속성입니다. 이 값을 0으로 설정하면 해당 아이템은 축소되지 않고, 자신의 크기를 유지하려고 합니다.

부모 컨테이너(.container)에 display: flex 속성을 적용하면 기본값으로 flex-grow: 0, flex-shrink: 1, flex-basis: auto로 설정됩니다.

.container {
    width: 500px;
    height: 50px;
    display: flex; 

    .item {
      width: 50px;
      height: 50px;
      flex-basis: 200px;
    }
}

 

flex-basis 값이 200px이었지만 여유공간이 부족해서 .item의 너비값이 줄어들었습니다.

 

flex-shrink: 1

 

 

 

flex-shrink: 0 값을 적용하여 아예 줄어들지 않도록 설정할 수 있습니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 200px;
      flex-shrink: 0;
  }

 

flex-shrink: 0

 

 

flex-grow : 1;

Flexbox 레이아웃에서 아이템이 컨테이너의 남은 공간을 어떻게 확장할지를 제어하는 속성입니다. 이 값을 0으로 설정하면 해당 아이템은 추가적인 공간을 차지하지 않으며, 그 크기를 유지하려고 합니다. 

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      flex-grow: 1;
  }

 

flex-basis 값이 100px이지만 flex-grow를 1로 설정하면 해당 아이템은 컨테이너의 남은 공간을 모두 차지하려고 합니다.

 

flex-grow: 1;

 

 

 

Flexbox를 사용하면 레이아웃을 훨씬 유연하게 제어할 수 있습니다. flex-basis, flex-grow, flex-shrink, width, max-width, min-width와 같은 속성들을 올바르게 이해하고 활용하면, 다양한 디바이스 및 화면 크기에 맞게 반응형 디자인을 구현하는 데 도움이 됩니다. 이러한 속성들을 효과적으로 활용하여 사용자 경험을 향상하고, 웹 애플리케이션의 성능을 최적화할 수 있습니다.

 

 

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

[Git] Git 리베이스: 작업 브랜치의 변경 사항을 최신 상태로 유지하는 방법

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?