플렉서블 레이아웃(flex)

[삐돌이]

플렉서블 레이아웃(flex)
대부분의 웹사이트는 수직 구성이며 "위-아래"로 스크롤 하여 사용됩니다. 
레이아웃을 구성할 때 가장 많이 사용하는 요소들이 대부분 블록개념으로 표시되며 
이는 뷰에 수직으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 구성할 수 있습니다. 
하지만 수평 구성의 경우는 속성이 명확하지 않기 때문에 
, float, inline-block으로 구성했습니다. 
따라서 쉽게 수평을 구성할 수 있는 flex(플렉서블 레이아웃)이 차선택으로 만들어졌습니다.

display: flex;

flex-wrap
플렉스 라인에 더 이상의 여유가 없을 때, 플렉스 요소의 위치를 다음줄로 넘길지 여부를 설정합니다. 
nowrap : 기본 설정, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 
         대신 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킵니다.
wrap : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다.
wrap-reverse : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다. 
              단, 아래쪽이 아닌 위쪽으로 넘어갑니다.


justify-content
플레스 요소의 수평 방향 정렬 방식을 설정합니다.        

flex-start : 기본 설정, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.
flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서 부터 배치됩니다.
center : 플렉스 요소는 플렉스 컨테이너의 가운데서부터 배치됩니다.
space-between : 플레스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.
space-around : 플렉스 요소는 앞, 뒤 그리고 요소들 사이에 모두 여유 공간을 두고 배치됩니다.
space-evenly

align-items
플렉스 요소의 수직 방향 정렬 방식을 설정합니다.
stretch : 기본 설정, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 
          뒤 연이어 배치됩니다.
flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.
flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.
center : 플렉스 요소는 플렉스 컨테이너의 가운데 배치됩니다.
baseline : 플렉스 요소는 플렉스 컨테이너의 기준선에 배치됩니다.

align-self
플렉스 컨테이너의 align-items 속성보다 우선 적용됩니다. 
이 속성을 사용하면 플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있습니다.

order
플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정합니다.

flex-grow
플렉스 컨테이너 아이템들이 차지할 너비들에 대한 증가형 숫자를 지정합니다.

flex-shrink
플렉스 컨테이너 아이템들이 차지할 너비들에 대한 감소형 숫자를 지정합니다.

flex-basis
플렉스 컨테이너 아이템의 길이를 지정합니다.

flex-direction(플렉스 방향 설정)

row (기본값)
아이템들이 행(가로) 방향으로 배치됩니다.

row-reverse
아이템들이 역순으로 가로 배치됩니다.

column
아이템들이 열(세로) 방향으로 배치됩니다.
그냥 block 요소들을 쌓아 놓은 것처럼 보이죠?

column-reverse
아이템들이 역순으로 세로 배치 됩니다.