flex-grow , basis 속성 차이

 

 

Flex 적용 시 기본적인 형태 

  1) flex-direction : row; 이 기본 값

  2) 가로 폭은 content의 크기만큼 가지기 때문에 균일하지 않다.

See the Pen Flex연습 by 최용훈 (@rspvzamj-the-styleful) on CodePen.

 

flex-grow : 1 적용

 1) flex 속성이 적용된 자식요소를 선택해야함

 2) 5개에 남은 여백을 나눠서 받음

 3) 기존 content 폭 + 남은여백/5 가 적용이 되서 여전히 폭이 동일 하지 않음.

See the Pen Flex연습 by 최용훈 (@rspvzamj-the-styleful) on CodePen.

 

 

 

flex-basis: 100px 적용

 1) 각 요소가 동일하게 100px 로 적용이 된다.

See the Pen Flex연습 by 최용훈 (@rspvzamj-the-styleful) on CodePen.

 

 

flex-basis: 20% 적용

 1) 각 요소가 전체 폭의 20% 만큼만 차지 한다. 요소가 5개 이므로 5x20%= 100% 로 flex box 의 전체 길이는 브라우저의

     폭만큼 차지한다.

 

See the Pen Flex연습(flex-basis:100px) by 최용훈 (@rspvzamj-the-styleful) on CodePen.