CSS - Flex

 

Flex

 

Flex Container에 적용하는 속성

display

• flex: 부모 컨테이너가 block 요소처럼 동작 (한 줄을 모두 차지).
• inline-flex: 부모 컨테이너가 inline-block 요소처럼 동작 (콘텐츠만큼의 너비만 차지하고, 다른 요소와 한 줄에 배치될 수 있음)

 

flex-direction (방향)

• 아이템들을 쌓을 주축(main axis)의 방향을 결정
• row (기본값): ➡️ 아이템을 왼쪽에서 오른쪽으로 배치
• row-reverse: ⬅️ 아이템을 오른쪽에서 왼쪽으로 배치
• column: ⬇️ 아이템을 위에서 아래로 배치
• column-reverse: ⬆️ 아이템을 아래에서 위로 배치

 

flex-wrap (줄 바꿈)

• 컨테이너에 아이템들이 다 들어가지 않을 때, 줄 바꿈을 할지 결정.
• nowrap (기본값): 줄 바꿈 없이 모든 아이템을 한 줄에 욱여넣는다. (아이템 크기가 줄어들 수 있음)
• wrap: 아이템들이 다음 줄로 넘어간다.
• wrap-reverse: 아이템들이 다음 줄(윗줄)로 넘어간다.

 

flex-flow (방향 + 줄 바꿈 단축 속성)

• flex-direction과 flex-wrap을 한 번에 쓸 수 있는 단축 속성.
• 예시: flex-flow: row wrap;

 

justify-content (주축 정렬)

• 주축(main axis) 방향으로 아이템들을 어떻게 정렬하고 분배할지 결정
•  
• flex-start (기본값): 시작점에 맞춰 정렬
• flex-end: 끝점에 맞춰 정렬
• center: 중앙에 맞춰 정렬
• space-between: 첫 아이템은 시작점에, 마지막 아이템은 끝점에 붙이고 나머지 아이템들 사이의 간격을 균등하게 분배한다.
• space-around: 모든 아이템의 주변(around)에 균등한 간격을 만든다. (양 끝 아이템의 바깥쪽 간격은 아이템 사이 간격의 절반)
• space-evenly: 모든 아이템 사이와 양 끝의 간격을 모두 균등하게 만든다.

 

align-items (교차축 정렬)

• 교차축(cross axis) 방향으로 아이템들을 어떻게 정렬할지 결정. (flex-direction이 row일 경우 세로 방향 정렬)
• stretch (기본값): 아이템들이 교차축 방향으로 컨테이너 높이를 꽉 채우도록 늘어난다. (아이템에 height 값이 없어야 함)
• flex-start: 교차축의 시작점에 맞춰 정렬
• flex-end: 교차축의 끝점에 맞춰 정렬
• center: 교차축의 중앙에 맞춰 정렬
• baseline: 아이템 내부 텍스트의 기준선(baseline)에 맞춰 정렬

 

align-content (여러 줄 정렬)

• flex-wrap: wrap;으로 여러 줄이 생겼을 때, 그 줄들 자체의 간격을 교차축 방향으로 어떻게 분배할지 결정
• 주의점: 아이템이 한 줄일 때는 아무 효과가 없음.
• flex-start, flex-end, center, space-between, space-around, space-evenly, stretch (기본값) 등 justify-content와 유사한 값을 가짐

 

align-items vs align-content

한 줄일 때: align-items만 신경 쓰면 된다.

여러 줄일 때:

• align-content는 "줄과 줄 사이의 간격"을 담당하는 더 큰 개념.
• align-items는 그렇게 배치된 "각 줄 안에서 아이템들의 정렬"을 담당하는 더 작은 개념

 

 

Flex Item에게 적용하는 속성

 

order

• HTML 구조와 상관없이, 화면에 보이는 아이템의 순서를 바꾼다.
• 숫자 (기본값 0). 숫자가 작을수록 앞에 배치, 음수도 가능.

 

flex-grow

• 컨테이너에 남는 공간이 있을 때, 해당 아이템이 얼마나 더 팽창할지 그 비율을 결정
• 숫자 (기본값 0). 0은 팽창하지 않음을 의미.
• 모든 아이템이 flex-grow: 1이면, 남는 공간을 모두가 1:1:1... 비율로 똑같이 나눠 가진다.
• 한 아이템만 2라면, 다른 아이템보다 2배 더 많은 공간을 차지

 

flex-shrink

• 컨테이너에 공간이 부족할 때, 해당 아이템이 얼마나 더 수축할지 그 비율을 결정
• 숫자 (기본값 1).
• 0은 수축하지 않음을 의미
• 숫자가 클수록 다른 아이템보다 더 많이 수축됩니다.

 

 

flex-basis

• flex-grow와 flex-shrink가 적용되기 전의 아이템의 기본 크기를 설정
• width에 사용하는 단위(px, %, em 등)를 사용.
• auto(기본값)는 해당 아이템의 width나 height 값을 사용

 

flex

• flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 단축 속성
• flex: 0 1 auto; (기본값)
• flex: 1; (1 1 0%와 같음): 남는 공간을 채우고, 부족하면 줄어듦. (가장 흔하게 사용)
• flex: none; (0 0 auto와 같음): 크기가 변하지 않음.
• flex: auto; (1 1 auto와 같음): flex-basis가 auto인 버전.

 

align-self

• 부모의 align-items 설정을 무시하고, 특정 아이템 하나만 교차축 방향으로 개별 정렬
• auto(기본값, 부모의 align-items를 따름)
• stretch, flex-start, flex-end, center, baseline 등 align-items와 동일한 값을 사용