flex 박스 모델

flex 중앙정렬

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

---

 

flex-wrap : 줄 넘기기 

• nowrap(default)
• wrap : ↙
• wrap-reverse : ↖

 

flex-direction : 생성 방향

• row(default) : → 
• row-reverse : ← 
• column : ↓
• column-reverse : ↑

 

justify-content : 가로축 정렬

• flex-start(default) : 컨테이너의 왼쪽 정렬
• flex-end : 컨테이너의 우측 정렬
• center : 컨테이너의 중앙 정렬
• space-between : 요소들 사이에 동일한 간격
• space-around : 요소들 주위로 동일한 간격 

 

align-items : 세로축 정렬 

• stretch(default) : 컨테이너에 맞게 늘림. baseline과 비슷하나 요소의 세로 길이를 동일하게 맞출 때 사용 
• flex-start : 컨테이너의 최상단 정렬
• flex-end : 컨테이너의 최하단 정렬
• center : 컨테이너의의 세로축 중앙 정렬
• baseline : 컨테이너의 시작위치에 정렬

 

flex-flow : 시작 시점 

• start
• end
• center