CSS FLEX

flexbox

flexbox 인터페이스 내의 아이템 간 공간배분과 정렬기능을 제공하기 위한 1차원 레이아웃 모델. 1차원을 칭하는 것은 레이아웃을 다룰 때 한번에 하나의 행 또는 열만 다룬다. flexbox를 다루기 위해서는 주축과 교차축을 기준으로 다루는데 사용되는 값에 따라 각각 정해진다.

flex 컨테이너

flexbox를 포장하고 있는 영역 flex컨테이너에 특정 값을 적용함으로써 내부의 flexbox를 제어할 수 있다.

display

플렉스 아이템을 감싸는 요소로 플렉스 컨테이너를 쓰려고 할
때 사용하는 속성

• flex - 컨테이너 안의 플렉스 아이템을 블록 레벨 요소로 배치
• inline-flex 컨테이너 안의 플렉스 아이템을 인라인 레벨 요소로 배치

flex-direction

• row(기본값) 주축을 가로로 지정, 왼쪽에서 오른쪽 배치
• row-reverse 주축을 가로로 지정, 오른쪽에서 왼쪽 배치
• column 주축을 위에서 아래로 지정, 위쪽에서 아래쪽으로 배치
• column-reverse 주축을 위에서 아래로 지정, 아래에서 위로 배치