아이템(div)의 너비 설정하기 - flex item 속성(2)

얼마 전에 flex css 속성들에 대해 포스팅하기로 했었는데 flex item 속성(1)까지 포스팅을 하고 그 후로 시간이 꽤 지났다. (이런 저런 일들로 너무 바빴...) 늦었지만 마무리는 해야하니까 오늘은 flex item 속성 제 2탄! 지난 번에 item 정렬과 순서를 설정하는 css를 알아보았다면 오늘 소개할 아이들은 item 너비와 관련된 css 들이다.

 

2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가?

2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1)

2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex container 속성(2)

2020/11/13 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 순서 설정하기 - flex item 속성(1)

---

flex-grow

아이템의 증가 너비 비율을 설정하는 css이다. 숫자가 클 수록 더 많은 너비를 가질 수 있다.

 

.flex_item { 
  flex-grow: 증가너비;
  /* 기본값은 0, 숫자가 클수록 더 큰 너비를 가짐 */ 
}

 

flex-grow가 0인 경우(기본값) 컨텐츠 내용(혹은 flex-basis)과 동일한 너비값을 갖는다.

 

 

flex-grow가 0보다 크게 지정된 경우 해당 아이템은 설정된 비율에 맞추어 빈 공간을 메우게 된다.

 

 

여기에서 주의해야 할 점 한가지!

flex-grow는 컨텐츠 부분(혹은 flex-basis)을 제외한 여백 부분을 숫자의 비율로 나누어 갖는다. 위의 예시에서 div 3개 모두 flex-grow:1; 을 주어 여백 비율은 모두 동일하게 적용되지만, 각 div의 컨텐츠 길이가 다르기 때문에 div 너비가 모두 조금씩 다른 것이다. (div 좌우 여백 비율은 동일)

 

 

컨텐츠가 없는 세 개의 div 박스에 flex-grow 값을 각각 1,2,3으로 주면 1:2:3 비율의 너비를 갖는 div를 얻을 수 있다.

 

flex-shrink

아이템의 감소 너비 비율을 설정하는 css이다. 숫자가 클 수록 더 많은 너비가 감소한다.

 

.flex_item { 
  flex-shrink: 감소너비;
  /* 기본값은 1, 숫자가 클수록 더 많은 너비가 감소함 */ 
}

 

가장 먼저 flex-shrink 값을 0으로 설정했을 때 div의 너비는 컨텐츠 내용(혹은 flex-basis)보다 작아지지 않는다. 가로 사이즈를 고정하고 싶을 때 width와 함께 사용하면 된다. 

 

 

flex-shrink 값을 0보다 큰 값으로 설정했다면 해당 div가 작아짐에 따라 설정한 비율에 따라 감소 너비를 갖는다. 예를 들어 100px 너비를 갖는 div가 2개 있다고 하자. 각각의 flex-shrink를 1,2로 지정하고, 총 감소 너비가 60px이라면...

 

 

• 첫번째 아이템 너비 : 원래 너비 100px - (총 감소너비 60px * 1/3) = 100px - 20px = 80px
• 두번째 아이템 너비 : 원래 너비 100px - (총 감소너비 60px * 2/3) = 100px - 40px = 60px 

 위와 같이 1:2 비율이 적용되어 div 박스 2개의 너비가 결정된다.

 

flex-basis 

아이템의 기본 너비이다. flex-basis의 값으로는 우리가 길이를 지정할 때 사용하는 %, px, em, rem 등의 단위를 모두 사용할 수 있다. 

기본값은 auto로 해당 아이템의 width값을 사용한다.

 

.flex_item { 
  flex-basis: 기본너비;
  /* 기본값은 auto */ 
}

 

아래 예시를 통해서 flex-basis를 사용했을 때와 width를 사용했을 때의 차이점을 알아보자.

 

 

div 두 개에 모두 flex-basis:100px;을 주었다. 첫번째 div에는 100px을 초과하는 컨텐츠 내용을 넣고, 두번째 div에는 100px 미만의 컨텐츠 내용을 넣었다. 첫번째 div는 컨텐츠 길이만큼의 너비값을 가졌으며, 두번째 div는 기본 너비로 설정한 100px을 유지했다. 

 

 

이번에는 div 두 개에 모두 width:100px;을 주었다. 컨텐츠 크기와는 상관없이 아이템 너비가 무조건 설정한 너비로 맞춰졌다.

 

flex

위에서 설명한 flex-grow, flex-shrink, flex-basis를 한꺼번에 나타낼 수 있는 단축 속성이다. 증가너비, 감소너비, 기본너비를 순서대로 적어주면 된다.

 

.flex_item { 
  flex: 증가너비 감소너비 기본너비;
  
  flex: 1 1 30px;
  /* 차례대로 증가너비 감소너비 기본너비 */ 
  flex: 1 1;
  /* 차례대로 증가너비 감소너비(단위 사용 안 함) */ 
  flex: 1 30px;
  /* 차례대로 증가너비 기본너비(단위를 사용) */ 
}

 

이때 증가너비값(flex-grow)은 반드시 입력해 주어야 하며, 감소너비(flex-shrink)를 생략하면 기본값인 1이 적용된다. 여기서 주의할 점은 기본너비(flex-basis)를 생략했을 때에 기본값인 auto;가 적용되는 것이 아니라 0이 적용된다는 것이다.

---

여기까지 flex css에 대해 모두 알아보았다. 레이아웃을 구성할 때에 정말 유용하게 쓰이는 flex css... 나중에 기회가 된다면 실제로 퍼블리싱에서 flex를 사용하여 레이아웃을 구성한 사례도 소개하도록 하겠다.