[CSS, flex] flex-basis=0으로 flexbox의 사이즈를 일치시키기

문제상황

부모 <div>에 display:flex 속성을 적용시켰다.

그리고 자식 <div> 엘리먼트들이 width 사이즈를 일치시키고 싶어서, 여기에 flex-grow: 1 속성을 적용시켰다.

 

그런데 문제는 자식 엘리먼트들의 width가 모두 같지 않았다.

 

 

해결방안

문제가 발생한 이유는 각 자식 <div> 엘리먼트마다 텍스트 길이가 달랐기 때문이다.

flex-grow를 통해 나머지 공간을 균등하게 분배하도록 flex container에게 지시하더라도,

콘텐츠가 더 많은 엘리먼트가 그에 비례하여 더 많은 공간을 차지했다.

flex로 공간을 분배하기 전에 각 엘리먼트의 초기 크기가 다르기 때문이다.

 

이 경우 flex-basis=0 으로 설정하여 엘리먼트의 초기 크기로 0으로 설정할 수 있다.

(디폴트값은 flex-basis=auto이다.)

그러면 남은 공간에 자식 <div>가 모두 균등하게 분배된다.

 

 

<div className="parent-box">
  <div className="first-child">first child</div>
  <div className="second-child">second</div>
  <div className="third-child">third third child</div>
</div>

/* SCSS */
.parent-box {
  display: flex;
  .first-child {
    flex-grow: 1;
    flex-basis: 0;
  }
  .second-child {
    flex-grow: 1;
    flex-basis: 0;
  }
  .third-child {
    flex-grow: 1;
    flex-basis: 0;
  }
}