flexbox 의 flex 속성

flex -> flex-grow flew-shrink flex-basis 를 나타낸다.

 

어떤 박스 2개를 2대 1의 비율로 배치하고 싶었다.

그래서 flex:2; flex:1; 을 적용하니 성공하였음.

 

그런데 flex 의 3가지 속성을 모두 넣고 싶었을 때 어떻게 해야할지 모르겠다!!

 

여기서 중요한 것은 flex-basis 였음.

 

flex-basis 속성으로 자주 사용하는 것은 auto 또는 0이다.

이때 0은 px 이나 % 처럼 단위를 함께 써줘야 한다.

 

auto 로 설정하면 콘텐츠의 크기를 기준으로 크기가 설정되고,

0 으로 설정하면 그것을 감싸는 container 기준으로 컨텐츠의 크기가 결정된다.

 

 

컨테이너 안에 원하는 비율대로 맞춰 넣고 싶다면 0(%) 로 지정해줘야 한다!

 

 

참고 사이트

https://d2.naver.com/helloworld/8540176