[Flexbox]

float - 이미지 / 텍스트를 배치

 

정렬방식
	가로, 세로방향 중심축 설정
	flex-direction : row, column, row-reverse
	컨텐츠가 가로범위를 넘어가면, 다음줄로 wrapping하는것
	flex-wrap : nowrap, wrap-reverse
이 둘을 합친거	👉 flex-flow : row nowrap;
아이템 배치
	배치를 가운데, 오른,왼쪽으로 하는것(중심축배치)
	justify-content : flex-start, center, space-around, space-between
	중심축이아닌곳의 배치
	align-items : center , baseline(텍스트에맞춰 정렬)
	justify-content의 중심축아닌축의 간격 및 위치
	align-content : center, space-around, space-between

 

	컨테이너내부의 내용물의 순서를 바꿔준다
	order : 1
	컨테이너의 크기에따라 꽉차서 늘어나는 정도
	flex-grow : 1 (default : 0)
	컨테이너가 작아졌을때 어떻게 행동하는가 지정
	flex-shrink: 1 (default : 0)
	flex grow/shrink를 사용하지않았을때 설정된 %에 맞게 채움
	flex-basis: auto(%로 표현)     => 각각의 item들 안에 %로 표시해준다
	align-self : 사이드축으로 배치를 옮길때
	center , baseline(텍스트에맞춰 정렬)

아이템이 수평으로 나아가므로 main axis는 수평축임