FlexBox
Display:flex; 는 부모박스에 적용시켜, 자식 박스의 방향과 크기를 경정하는 레이아웃 구성방법
요소의 절렬, 요소가 차지하는 공간 설정가능
부모요소에 적용해야하는 속성
Flex-direction - 자식 요소들을 정렬할 정렬축 설정( 설정하지않은면 기본적으로 가로정렬.)
flex-wrap - 줄바꿈 설정
속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다
(설정하지않으면 줄이바뀌지 않음)
justify-content - flex-start , flex-end, center, space-between, space-around
align-items - 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이
가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어
있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
자식요소에 적용해야하는 속성
Align-self - align-items로 교차축(cross axis) 아이템 정렬을 정한다
Order - 배치순서를 설정할수 있다.
Flex-grow - 비율적으로 빈공간을 나눠갖는다.