CSS Flexbox 정렬이 안 됩니다

Question

Flexbox로 가로 정렬을 하려는데 자식 요소가 세로로 쌓입니다. ```css .container { display: flex; } .item { width: 33%; } ``` 뭐가 문제일까요? Chrome 개발자 도구에서 봐도 flex는 적용된 것 같은데...

프론트수진 · Accepted Answer

혹시 `.container`에 `flex-direction: column;`이 들어있지는 않나요?

기본값이 `row`이긴 한데, 다른 CSS에서 덮어쓰는 경우가 많습니다. 개발자 도구에서 computed 탭을 확인해보세요.

그리고 `flex-wrap: wrap;`을 추가해야 줄바꿈이 됩니다.

김영삼 · Answer

Flexbox 디버깅 팁: Firefox 개발자 도구가 Flex 레이아웃 시각화를 잘 보여줍니다. Chrome보다 추천해요.

댓글 3