[CSS] Flex의 속성

Flex 컨테이너에 적용하는 속성

justify-content

→ 메인축(가로) 방향으로 아이템들을 정렬

flex-start : 시작점 정렬

flex-end : 끝점 정렬

center : 가운데 정렬

space-between : 아이템들 사이에 균일한 간격을 만들어 정렬

space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 정렬

space-around : 아이템들의 둘레에 균일한 간격을 만들어 정렬

 

align-items

→ 수직축(세로) 방향으로 아이템들을 정렬

flex-start : 시작점 정렬

flex-end : 끝점 정렬

center : 가운데 정렬

stretch : 수직축 방향으로 끝까지 늘어남

 

flex-direction

→ 배치되는 축의 방향을 결정

row : 가로 방향으로 배치

row-reverse : 가로 방향에서 역순으로 배치

column : 세로 방향으로 배치

column-reverse : 세로 방향에서 역순으로 배치

 

flex-wrap

→ 한 줄에 담을 여유가 없을 때 줄바꿈을 어떻게 할지 결정

nowrap : 줄바꿈 X (기본값)

wrap : 줄바꿈 O

wrap-reverse : 역순으로 줄바꿈 O

 

flex-flow

→ flex-direction과 flex-wrap을 한꺼번에 지정

column wrap : 세로 방향으로 배치하고 줄바꿈을 함

 

---

Flex 아이템에 적용하는 속성

flex-basis

→ 아이템의 기본 크기를 설정 (flex-direction이 row일 때는 너비, column일 때는 높이)

기본값 auto는 해당 아이템의 width 값을 사용

ex) flex-basis: 100px;

 

align-self

→ 수직축 방향으로 해당 아이템을 정렬

align-self는 align-items보다 우선권이 있음

 

order

→ 나열 순서를 결정하는 속성

기본값은 0으로, 특정 아이템의 값이 작은 숫자일 수록 먼저 배치됨 (밀어내는 느낌)

ex) order: 1;

 

---

참고

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

FLEX 개구리 🐸, FLEX 디펜스 💣 로 Flexbox 연습(복습) 하기!