웹1 10일차

https://codepen.io/EONJENOG/pen/wvLWrbZ

flex-grow ★★★

 

[flex-grow]

- container 공간 사용

- 여백, 형제 크기 등... 사용하고 남는 공간 차지

 

▶ 계산공식

flex-container / flex-grow총 값 (= n값)

ㄴ 덩어리로 나눈 후 태그 flex-grow 수치값에 따라 배분

 

예시) flex-grow 배분 예시

ㄴ flex-grow 총 값이 4개일 때

     : n값 n값 n값 n값

 

 

 

 

 

 

https://codepen.io/EONJENOG/pen/bGPePPp?editors=1100

justify-content 활용해보기

 

https://codepen.io/EONJENOG/pen/KKjMONX?editors=1100

flex-grow 활용 예제

 

https://codepen.io/EONJENOG/pen/yLdJmPK?editors=1100

flex-direction 예제

 

https://codepen.io/EONJENOG/pen/oNrLKdN

flex-grow와 flex-basis