Flexbox

Flexbox는 유연한 박스모델 이라는 뜻을 가졌다.
그만큼 box 모델을 유연하게 조절가능하다는 뜻이다.
container(부모box)와 item(자식box)에 적절한 값을 활용하여 레이아웃 배치를 한다.

container (box) 에 적용가능한 속성값

• display : flex;
  - flexbox환경을 구현하고자 하는 부모 box레이아웃에 선언 (기본값 왼쪽 -> 오른쪽

• flex-direction
  - box정렬방향 (속성값을 설정해야한다.)

• flex-wrap
  - 웹창의 사이즈가 작아질때 item기본 크기를 유지하며 다음라인으로 넘어간다.(기본값 no wrap)

• flex-flow
  - direction, wrap를 순서로 한번에 묶어서 작성 가능

• justify-content
  - 중심축에서 item 배치방향 (속성값을 설정해야한다.)

• align-items
  - 반대축에서 item 정렬방향 (속성값을 설정해야한다.)

• align-content
  - 반대축에서 item 배치방향 (속성값을 설정해야한다.)

item에 적용가능한 속성값

• order
  - 값을 이용해서 item의 n번째 순서에 배치한다.

• flex-grow
  - 창이 늘어날때 같이 크기가 늘어나는 비율
  

• flex-shrink
  - 창이 작아질때 같이 크기가 작아지는 비율

• flex-basis
  - 기본적인 크기와 비율
  

• align-self
  - item 하나만 지정하여 배치방향을 정할수 있다.