처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
퀴즈 / CSS / 문제

CSS Flexbox에서 align-items와 align-content의 차이점으로 올바른 것은?

어려움 MDN Web Docs
보기 및 정답
A align-items는 한 줄 내 아이템 정렬, align-content는 여러 줄(wrap 시) 사이의 간격을 조절한다
B 플렉스 컨테이너에 flex-wrap을 설정하지 않아도 align-content 속성이 정상적으로 동작하여 효과가 나타난다
C justify-content와 align-items 속성은 동일한 축을 기준으로 작동하며 방향만 다르게 적용되는 것이다
D align-items는 각 아이템의 개별 정렬을 설정하고 align-content는 한 줄의 아이템 전체를 정렬한다

해설

align-items는 교차축(cross axis) 기준으로 각 줄 내부의 아이템을 정렬합니다. align-content는 flex-wrap: wrap으로 여러 줄이 생겼을 때, 줄과 줄 사이의 간격과 분포를 제어합니다. 한 줄만 있을 때는 align-content가 효과를 발휘하지 않습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기