공통점
둘 다 cross-axis 기준 정렬이다.
차이점
- align-items : flex line을 기준으로 아이템을 정렬한다.
- align-content: flex line을 정렬한다.
align-content는 corss axis에 대한 justify-content라 이해할 수 있다. 값도 space-between 처럼 justify-content 에서 사용되는 값을 줄 수 있다.
align-content는 nowrap인 경우 사용하는 의미가 없다. nowrap은 강제로 한 줄에 그리는 것이기 때문에 flex line이 하나 뿐이기 때문이다. 반대로 align-itmes는 line이 한 줄인 경우에도 그 라인 안에서 정렬하는 것이기 때문에 작동한다.
flexbox froggy 21번 문제에서 align-content를 사용해 볼 수 있다.
https://flexboxfroggy.com/#ko
'dev > CSS' 카테고리의 다른 글
| tailwind css의 classname 순서 문제 (0) | 2022.09.23 |
|---|---|
| position : absolute가 부모 엘리먼트 밖으로 나가는 문제 (1) | 2020.08.13 |
| CSS flexbox : 기본 개념 (0) | 2020.08.04 |
| CSS Grid : 기본 개념 (0) | 2020.08.04 |