Flex박스 속성 : grow, shrink, basis

사실 웹개발을 어느정도 해본사람이라면 mdn만 봐도 css flex 속성을 이해하는데 충분하다.

그런데 mdn의 단어들은 입문자들에겐 조금 어려운것 같다.

나도 몇달전엔 이해하지 못했던 mdn의 글들이 이제서야 이해가 된다.

---

flex속성은 flex-grow, flex-shrink, flex-basis 세 속성의 축약형

flex-grow, flex-shrink, flex-basis에 대한 설명은 조금 더 내리면 볼 수 있다.

flex : 1 3 100px

//* flex-grow : 1, 형제 요소들과 비교했을때 얼만큼의 비율을 차지 *//
//* flex-shrink : 3, 크기가 너무 커서 넘치게 될 때 얼만큼의 비율로 줄어들지 *//
//* flex-basis : 100px, 초기 크기*//

• 가장 좋은 방법은 mdn에서 실습해보는 것 : grow, shrink, basis

flex 속성은 무조건 형제 엘리먼트들의 flex 속성과 비교한 상대값이다.

코드를 보면서 이해해보자.

---

grow : 컨테이너에서 얼만큼의 비율을 차지할 것 인지?

.num1 {
  flex-grow: 1;
}

.num2 {
  flex-grow: 2;
}

.num3 {
  flex-grow: 1;
}

flex-grow 의 값에 따라, 1 : 2 : 1 의 비율을 차지함을 알 수 있다.

shrink : 만약 컨테이너보다 커서 넘치게 되면 몇 배 줄일껀지

우선 넘친다는게 뭔뜻인가 싶을테니, flex-shrink를 적용하기 전 상황부터 보여드림.

//* 외부 컨테이너 400px*//
.containor .flex-wrapper {
  margin: 10px;
  border: 1px black solid;
  width: 400px;
}

//* 내부 요소 각각 600px *//
.containor .flex-wrapper .icon {
  margin: 5px;
  width: 600px;
  border: 1px goldenrod solid;
  padding: 5px;
}

(세로로 쌓이는 이유는 display:flex를 적용하지 않았기 때문)

보시다시피 400px의 컨테이너 안에서 600px 내부 요소들이 넘치고 있다.

이제 flex-shrink를 적용해보자.

.num1 {
  flex-shrink: 1;
}

.num2 {
  flex-shrink: 2;
}

.num3 {
  flex-shrink: 1;
}

flex-shrink의 값에 따라, 1 : 2 : 1 의 비율로 축소, 즉 1 : 0.5 : 1의 비율을 차지함을 알 수 있다.

basis : 초기크기

.containor .flex-wrapper {
  margin: 10px;
  border: 1px black solid;
  display: flex;
  width: 400px;
}

.num1 {
  /* flex-grow: 1; */
  flex-basis: 100px;
}

.num2 {
  /* flex-grow: 2; */
  flex-basis: 100px;
}

.num3 {
  /* flex-grow: 1; */
  flex-basis: 100px;
}

초기값에 따라 100px씩 나눠가진다.

(전체 컨테이너 400px인데 남은 공간이 100px이 아닌 이유는 각 요소의 margin, padding 때문)

flex 축약형

.num1 {
  /* 
    flex-grow : 1;
    flex-shrink : 2;
    flex-basis : 30px;
    과 같다.
 */
  flex: 1 2 30px;
}

.num2 {
  flex: 1 2 300px;
}

.num3 {
  flex: 1 1 300px;
}

각 내부요소의 크기 초기값의 합 30px + 300px + 300px > 외부컨테이너 크기 400px 이기 때문에 flex-shrink가 적용되어

0.5 : 0.5 : 1 의 비율로 크기를 차지한다.

---

참고문서 :

https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow

https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink

https://developer.mozilla.org/ko/docs/Web/CSS/flex-basis

코드 : https://github.com/ryu9663/css-practice/tree/main/flex-practice