Flexbox css

flexbox : 부모 box 가 가변적인 경우 어떻게 자식 요소들을 정렬할지 설정

이전엔 float를 써서 정렬함(left center right)
그러나 이건 float의 본래 목적이 아니니 flex 권장

item에 지정되는 속성값들

중심축과 반대축 개념이 존재 (수직or수평)

컨테이너 속성
display: flex

flex-direction: row or column - reverse //수평수직

flex-wrap: nowrap ,wrap //랩핑시 다음라인으로 넘어감

justify-content: flex-start,+end,center,space-around,space-between//중심축 배치 위치

align-items: baseline;()택스트 중심
align-content:center 등등

아이템속성
order:1 //순서지정
flex-grow:1//컨테이너에서 커졌을때 차지하는는 비율
flex-shrink:0//아이템들이 작아졌을때 비율

flex-basis:60% //아이템 공간차지 명시 위 둘다 아우름
align-self:center//아이넴 하나만 배치하고싶을때