CSS flexbox

Flexbox layout은 container 내부 items에게 공간을 효율적으로 나눠주기 위한 module의 일종으로 내부 items의 크기를 모르거나 동적으로 작동할 때마저 적용이 가능하다.

flex container는 items을 사용가능한 공간에 확장시키거나 overflow를 막기 위해 감추는 동작이 가능하다. 

가장 중요한 점은 flex layout은 기존의 수직으로 작동하는 block이나 수평으로 작동하는 inline과 달리 방향을 정할 수 있다.

 

 

 

flex-direction

 

 

 

row : 기본설정으로 왼쪽에서 오른쪽 방향이다. 

row-reverse : 오른쪽에서 왼쪽 방향이다.

column : row와 같지만 위에서 아래 방향이다.

column : row-reverse와 같지만 아래서 위 방향이다.

 

 

 

Grid layout이 좀더 큰 화면에 적합한 반면 flex layout은 application의 요소나 작은 화면을 구성하는데 적합하다. 

 

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.

flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.

center: 요소들을 컨테이너의 가운데로 정렬합니다.

space-between: 요소들 사이에 동일한 간격을 둡니다.

space-around: 요소들 주위에 동일한 간격을 둡니다. 

 

 

 

 

 

flex-wrap

flex-item의 줄바꿈 성질을 제어하는 특성이다. 

 

 

 

nowrap : 기본설정으로 모든 flex items이 한 줄에 정렬된다.

wrap : 위에서부터 아래로 flex items이 여러 줄로 정렬된다.

wrap-reverse : 아래서부터 위로 flex items이 여러줄로 정렬된다.

 

 

 

 

 

 

justify-content

flex 요소의 수평 방향 정렬 방식을 설정한다고 할 수 있다. 

 

 

 

justify-content는 중심축에 따른 배열을 정의한다.

축을 중심으로 모든 flex items들을 남은 공간에 배치하는데 도움을 주는 프로퍼티이다.

 

flex-start : 기본속성으로 items들이 앞쪽 라인에서부터 배치된다.

flex-end : items들이 뒤쪽라인에서부터 배치된다.

center : 정 중앙에 배치된다.

space-between : 첫번째 아이템은 시작되는 부분에 마지막 아이템은 끝나는 부분에 배치된 후 남은 공간에 나머지 items들이 배치된다.

space-around : 모든 items 간의 간격이 동일하게 배치된다. 화면상으로는 그렇지 않게 보이겠지만 모든 items들은 동일한 양쪽 간격을 가지고 있다. 

space-evenly : 모든 items 간의 간격이 중복되는 부분까지 고려되어 동일하게 배치된다. 

 

 

 

 

 

 

align-items

flex 요소의 수직 방향 정렬을 설정한다고 할 수 있다. 

 

 

 

 

align-items는 한 줄만을 가지는 flex box에서는 효과가 없으며, 두 줄 이상을 가지는 flex box에서만 효과가 있다. 

 

flex-start : flex container 위쪽에 배치된다. 

flex-end : flex container 아래쪽에 배치된다. 

center : flex container 가운데에 배치된다. 

baseline : flex container의 기준선에 배치된다.

stretch : 기본설정으로 flex 요소의 높이가 flex container의 높이와 같게 변경된 뒤 연이어 배치된다.