반응형
align-items VS justify-content
align-items
세로축을 기준으로 정렬한다. (위-아래)
- flex-start: 상단으로 정렬
- flex-end: 하단으로 정렬
- center: 중앙으로 정렬
- baseline: 컨테이너의 시작위치에 정렬
- stretch (default): 컨테이너에 맞게 늘림
justify-content
가로축을 기준으로 정렬한다. (좌-우)
- flex-start (default): 왼쪽으로 정렬
- flex-end: 오른쪽으로 정렬
- center: 중앙으로 정렬
- space-between: elements 사이에 동일 간격을 둠
- space-around: elements 주위에 동일 간격을 둠
반응형
'HTML, CSS, JavaScript' 카테고리의 다른 글
| [CSS] grid-template: repeat 사용 (0) | 2021.08.08 |
|---|---|
| [CSS] position 속성 사용법 (0) | 2021.08.08 |
| [CSS] overflow 사용방법 (0) | 2021.08.08 |
| [CSS] 100vh와 100%의 차이 (100vh vs 100%) (4) | 2021.08.08 |
| [CSS] *{ padding: 0; margin: 0; } 의 의미 (0) | 2021.08.08 |