flexbox

youtu.be/eprXmC_j9A4

0~18분 40초 까지

flex는 박스 부모에 적용하는 것 - 안에 있는 아이템들에게 적용됨 

 

column,

row가 원래 기본값임

 

 

wrap;으로 하면 화면줄였을때 밑으로 떨어짐 

 

 

가운데 여백 똑같이 나눠가짐

양옆에 여백이 있고, 안에서 여백을 똑같이 나눠가짐

 

한가운데 놓기 / justify-content: center, align-items:center;

 wrap 일때만 됨 / align-content 적용시 

 

 

아이템에 적용

flex-grow 여백을 1:2:1로 나눠 가지는 것임 / 각각의 비율을 나눈것이 아님 

면적을 비율대로 적용하고싶을때 flex-basis:0으로 하고 나머지를 적용하면 그 비율대로 됨 / flex-grow:1 ;

여백말고 , 진짜 면적이 비율대로 적용 flex:1; 그냥 flex로 쓰면 되겠다.

flex:1 ; 로 지정시  flex-basis:auto;가 됨  

1만 200px로 고정하고 2만 늘어나고 싶을때 

 order로 보이는 순서 변경가능 

 order로 아이템 순서 변경가능