tailwindcss에서 flex:1, flex:2, flex:3처럼 비율 구현

tailwind로 프로젝트를 진행하고 있는데

flexGrow를 쓰면 비율을 맞춰주는줄 알았는데

그것이 아니었다...ㄷㄷ

내용에 어떤 text가 있다면 이 크기만큼 더 공간을 차지해버린다.

 

즉 text가 있으면 비율이 안맞음.

 

커스톰에 구현을 해줘야하는데

 

module.exports = {
  theme: {
    extend: {
      flex: {
        2: '2 2 0%',
        3: '3 4 0%',
        4: '4 4 0%',
        5: '5 5 0%',
        6: '6 6 0%',
        7: '7 7 0%',
        8: '8 8 0%',
        9: '9 9 0%',
      },
    }
  }
}

이런 식으로 구현을 해주면 된다,

이러면 flex-2 를 className에 적용시키면

2 비율만큼 차지한다.

즉 1 2 5 2 이렇게 있으면

 

1+2+5+2 = 10이니까

10%, 20%, 50%, 20% 씩 차지하게 된다.

 

위처럼 2 아래에

3, 4, 5, ~~~~~ 9정도 까지 적어주고 사용하도록 하자.

 

3가지 값들은 무엇이냐면

flex-grow, flex-shrink, flex-basis 값.

grow는 빈 칸을 차지하면서 어느 정도 비율을 차지할지.

shrink는 축소될 수 있음을 나타냄

basis는 flex아이템의 초기 크기를 설정합니다. 즉 이 클래스네임 안에 있는 값의 크기.