🍰 주 축 기준 배치 방법 지정
justify-content
- flex-start : 주축의 시작점 기준 배치
- flex-end : 주축의 끝점 기준 배치
- center : 주축의 중앙 기준 배치
- space-between : 첫 항목은 시작점, 끝 항목은 끝점, 중앙 항목은 같은 간격으로 배치
- space-evenly : 모든 항목을 같은 간격으로 배치
- space-around : 각 항목은 양쪽 여백의 절반만큼 나누어 가짐
🍰 교차 축 기준 배치 방법 지정
align-items
- stretch : flex item을 확장해 교차축을 꽉 채움. 기본값
- flex-start: 교차축의 시작점 기준 배치
- flex-end : 교차축의 끝점 기준 배치
- center : 교차축의 중앙 기준 배치
- baseline : 시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점에 배치
🍰 항목의 배치 순서 바꾸는 order 속성
- 0 - 입력한 순서대로 배치
- 숫자 - 그 순서에 따라 배치
- 음수도 가능
참고:
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items,
https://www.aladin.co.kr/m/mproduct.aspx?ItemId=227200213(책)
'HTML & CSS' 카테고리의 다른 글
| [Sass] Sass - 주석, 변수, 중첩 규칙, 믹스인, 인자 (0) | 2024.05.20 |
|---|---|
| [Sass] Sass 설치, 컴파일 명령어 (0) | 2024.05.20 |
| Flexbox -> flex-direction, flex-wrap, flex-flow (0) | 2024.05.06 |
| 웹 접근성(Web Accessibility)과 WAI-ARIA (0) | 2024.04.30 |
| margin/padding/border (0) | 2024.02.01 |