css [flex box 모델]

position

relative 원래 자리에서 상대적인 이동
absolute 담긴 위치에서 이동
fixed 윈도우 기준 이동
sticky는 항상 붙어있음

float
이미지와 텍스트를 배치하기 위해 사용

flexbox
- 행 열로 자유롭게 배치시킬 수 있는 tag

display: flex;
flex-direction: (row,column,row-reverse ...)
flex-wrap: nowrap (wrap이면 화면 작아졌을 때, 줄 바꿔 표시 nowrap이면 크기가 줄어듬)
flex- flow: 위의 두 태그를 합친것
justify-content: (space-around, flex-start, flex-end, center, space-around, space-evenly, space-between)   중심 축을 기준으로 정렬
align-item:  (baseline)  
align-content: (space-between, center) 반대 축을 기준으로 정렬

order 속성
- flex에서 순서를 변경

flex-grow 
화면이 커졌을 때 메꿈 (0이면 작동 x, 1이상 비율로 커짐)

flex-shrink
화면이 작아졌을 때 줄어듦(0이면 작동x, 1이상 비율로 커짐)

flex-basis
박스안의 태그들의 크기 비율을 설정 (ex flex-basis:60% flex-basis:30%)

align self
부모 박스의 자식과 상관x  부모공간 내 자신의 위치만 변경