CSS CSS Flexbox 플렉스 박스 / justify-content / align-items
페이지 정보
작성자 모던DS
조회 66회
조회 66회
본문
CSS Flexbox 플렉스 박스
justify-content / align-items
정렬의 마법: 두 개의 축 (Axes)
Flexbox를 이해하는 가장 중요한 열쇠입니다.
메인축 (Main Axis): 아이템이 배치되는 방향
교차축 (Cross Axis): 메인축과 수직인 방향
위치 정렬 (Alignment)
메인축 정렬 (justify-content)
아이템들 사이의 간격과 수평 정렬을 담당합니다. justify-content: flex-start justify-content: flex-end justify-content: center justify-content: space-between justify-content: space-around justify-content: space-evenly
플렉스 항목을 주축 방향으로 배치할 때의 배치 기준입니다.
| 속성값 | 설명 |
| flex-start | 주축의 시작점에 맞춰 배치합니다. 기본값입니다. |
| flex-end | 주축의 끝점에 맞춰 배치합니다. |
| center | 주축의 중앙에 맞춰 배치합니다. |
| space-around | 항목을 고르게 정렬합니다. 각 항목은 양쪽 여백의 절반만큼 자리를 차지합니다. |
| space-between | 첫 번째 항목은 주축 시작점에, 마지막 항목은 주축 끝점에 배치한 후 나머지 항목은 같은 간격으로 배치합니다. |
| space-evenly | 항목을 고르게 정렬합니다. 각 항목의 여백은 모두 동일합니다. |
교차축 정렬 (align-items)
아이템들의 수직 위치를 정렬합니다. align-items: stretch align-items: flex-start align-items: flex-end align-items: center align-items: baseline
| 종류 | 설명 |
| flex-start | 교차축의 시작점에 맞춰 배치합니다. |
| flex-end | 교차축의 끝점에 맞춰 배치합니다. |
| center | 교차축의 중앙에 배치합니다. |
| baseline | 교차축의 문자 기준선에 맞춰 배치합니다. |
| stretch | 플렉스 항목을 늘려 교차축에 가득 차게 배치합니다. |
