flexbox(플렉스박스)

•  행(row) 또는 열(column)을 주축으로 설정하여 웹 요소를 배치/정렬하는 1차원 레이아웃
•  요소의 배치/정렬은 플렉스 컨테이너 & 플렉스 아이템간 상호작용을 통해 결정
•   ㄴ 플레스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소 
•   ㄴ 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소

사용방법 :

display: flex; 

를 적용하면 플렉스 컨테이너가 만들어진다. (+ 플렉스 컨테이너는 기본적으로는 박스레벨요소)

 

display: inline-flex; 
=> 인라인레벨요소의 플렉스 컨테이너

 

-플렉스박스 방식은 두 개의 축(행(x축),열(y축))이 있다.

-동시에 두축을 제어하는 방식은 없다. (둘 중 하나만) => 1차원 레이아웃 방식

-기본축은 가로축인 x축

---

flex-direction

-row : 주축이 행 / 방향 : 왼 -> 오

-row-reverse : 주축이 행 / 방향 : 오 -> 왼

-column : 주축 열 / 방향 : 위 -> 아래

- column-reverse : 주축 열 / 방향 : 아래 -> 위

display: flex;
+
flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;

flex-wrap

- nowrap : 기본값 / 공간이 부족해도 요소를 한줄에 배치

- wrap : 공간 크기에 따라 요소들이 여러 행에 걸쳐 배치

- wrap-reverse : =wrap / 그러나 나열되는 시작점, 끝점 반대

display: flex;
+
flex-wrap: nowrap;  - 기본값(강제로 한줄에 배치)
flex-wrap: wrap; - 요소배치에따라 새로운 행 생성
flex-wrap: wrap-reverse; - wrap이 거꾸로

 

justify-content

플렉스박스 item들이 플렉스박스 주축에 따라 배치될 때 요소 사이 공간을 분배하는 방식 결정

justify: content;
+
flex-start : 주축의 시작점으로부터 끝점을 향해 배치
flex-end : 끝점으로부터 시작점을 향해 배치
center : 중심부에 배치
space-between : 주축에서 일정한 간격을 둔 채 양끝 정렬 배치
space-around : 모든 요소가 동일한 여백을 갖도록 배치
space-evenly : 모든 요소 사이의 간격을 동일하게 유지해 배치

 

align-items

align-items:
+
stretch - 플렉스아이템이 교차축 길이에 맞춰 늘어남
flex-start - 교차축 시작점부터 끝점으로 배치
flex-end - 교차축 끝점부터 시작점으로 배치
center - 교차축 중심부 배치

 

align-content

flex-wrap의 값이 wrapd으로 지정되어 있을 때 사용 가능

아이템 배치를 위한 필요 공간보다 플렉스 컨테이너 크기가 더 커야 가능