Flexbox란?
Flexbox는 부모 요소(컨테이너)와 그 자식 요소(아이템) 간의 관계를 기반으로 요소를 배치합니다. Flexbox를 사용하면 다음과 같은 특징을 활용할 수 있다.
- 단순한 정렬: 아이템을 수평 또는 수직 중심을 기준으로 정렬할 수 있습니다.(1차원 정렬, Grid는 2차원)
- 유연한 레이아웃: 아이템 간 간격 및 정렬을 유연하게 조정할 수 있습니다.
- 아이템의 크기 조절: 아이템 간 크기를 자동으로 조정하거나 수동으로 설정할 수 있습니다.
Flexbox 속성
Flexbox를 사용하려면 부모 요소(컨테이너)에 display: flex; 속성을 설정하고, 자식 요소(아이템)에 flex 속성을 사용하여 레이아웃을 제어한다.
- 백문이 불여일견 Cheat Sheet를 통해 감잡기(요소를 나열하기 전 한번 살펴보면 훨씬 이해가 빠르다.)
- 백견이 불여일각 보는것보다 사용하는게 더 기억에 남습니다.
부모 요소(컨테이너)에 설정하는 속성:
- display: 컨테이너를 Flexbox 컨테이너로 설정
값: flex (기본값 - 컨테이너를 상/하로 쌓음), inline-flex(컨테이너를 좌/우로 쌓음) - flex-direction: 아이템을 배치하는 방향을 설정
값: row (기본값- 좌->우로 배치), row-reverse(우->좌), column(상->하), column-reverse(하->상) - flex-wrap: 아이템이 한 줄에 나타나지 못할 경우 줄 바꿈 여부를 설정
값: nowrap (기본값 부모의 넓이/높이에 맞게 요소 강제 축소/확대), wrap(자식 요소의 넓이/높이 우선해 줄바꿈), wrap-reverse(줄바꿈을 역순으로 정렬해서 나열) - flex-flow: flex-direction과 flex-wrap을 한 번에 설정
값:flex-flow: <flex-direction> <flex-wrap>; - justify-content: 아이템을 수평 방향으로 정렬
값: flex-start (기본값), flex-end, center, space-between, space-around, space-evenly - align-items: 아이템을 수직 방향으로 정렬
값: stretch (기본값), flex-start, flex-end, center, baseline(아이템 안의 글씨 하단을 맞춰 정렬) - align-content: 여러 줄의 아이템을 수직 방향으로 정렬
값: stretch (기본값), flex-start, flex-end, center, space-between, space-around
[1]
자식 요소(아이템)에 설정하는 속성:
- order: 아이템의 순서를 지정하며 작은 수부터 오름차순으로 정렬
값: -1, 0, 1, 2, 3 - flex-grow: 컨테이너 내에서 사용 가능한 공간을 아이템에게 할당하는 비율을 결정
값: 1(기본값), 2 이면 다른 1인 아이템보다 2배의 비율로 확장 - flex-shrink: 컨테이너 내에서 공간이 부족할 때 아이템의 축소 비율을 결정
값: 1(기본값), 2 이면 다른 1인 아이템보다 2배의 비율로 축소 - flex-basis: 아이템의 초기 크기를 설정
값: auto(기본값), 200px/100%단위 사용 - flex: flex-grow, flex-shrink, flex-basis를 한번에 설정
값:flex: <flex-grow> <flex-shrink> <flex-basis>; - align-self: 개별 아이템의 수직 정렬을 컨테이너에서 정의한 정렬과 다르게 설정
값: auto(기본값), stretch, flex-start/end/center, baseline(아이템 안의 글씨 하단을 맞춰 정렬)
Reference
러닝커브를 빠르게 높이자🎢