Flexbox를 사용하면 기존에 방식에 비해 매우 간단히 레이아웃을 처리할 수 있다.
- 1줄의 코드 추가로 수평 정렬이 가능하다
- 요소의 상하좌우 정렬, 순서 변경이 간단하다
- 요소가 간격 조절이 간단하다
- 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다
-. Flexbox 레이아웃은 flex item이라 불리는 자식 요소와 이들을 내포하는 flex container 부모 요소로 구성된다.
-. flex-direction
flex-direction 속성은 flex 컨테이너의 주축 방향을 설정한다
- row : 가로축 정방향
- row-reverse : 가로축 역방향
- column : 세로축 정방향
- column-reverse : 세로축 역방향
-.flex-wrap
flex-wrap : nowrap; : flex item의 폭은 flex container에 들어갈 수 있는 크기로 축소
overflow : auto; : 이것을 지정하면 item들의 width 합계가 컨테이너의 width 보다 큰 경우 가로스크롤이 생기면서 컨테이너를 넘지 않는다.
flex-wrap : wrap; : item들의 width 합계가 컨테이너의 width 보다 큰 경우 flex item을 복수행에 배치한다
flex-wrap : wrap-reverse; : 역순으로 wrap
-.flex-flow
flex--flow 는 flex-direction 속성과 flex-wrap 속성 설정을 위한 shorthand이다
flex-flow : <flex-direction> || <flex-wrap>;
-. justify-content
flex-start : 좌측기준 정렬
flex-end : 우측기준 정렬
center : 중앙정렬
space-between; : 첫번쨰와 마지막 좌우 측면에 정렬되고 나머지 균등한 간격 정렬
space-around : 모든 flex item은 균등한 간격
