Flex는 크게 Container,Item 있다.
Container안에 여러 Item을 정렬할수있게 해준다.
display
flex-direction
Item의 중심축을 결정
flex-wrap
Item을 한줄,여러줄에 정렬할지 결정
flex-flow
flex-direction과 Flex-wrap을 합친 속성
Justify-content
주축의 Item 정렬방법을 결정
align-items
수직축의 Item 정렬방법을 결정
align-content
수직축의 정렬방법을 결정(여러줄일때 사용가능)
order
Item의 순서를 지정
flex-grow
Item의 증가 너비 비율을 설정
flex-shrink
Item의 감소 너비 비율을 설정
flex
flex-grow, flex-shrink, flex-basis의 단축 속성
align-self
지정된 align-items의 정렬방법을 무시하고 수직축의 정렬방법을 결정
유용한 사이트👍
https://flexboxfroggy.com/#ko (CSS Flex box로 게임하기)
https://heropy.blog/2018/11/24/css-flexible-box/
https://www.youtube.com/watch?v=7neASrWEFEM