CSS flexbox 디버깅

CSS flex는 유용하지만 난해하다. 미리 적용 가능한 사이트를 통해 테스트와 학습을 할 수 있다. 크롬 90버전에서 flex를 쉽게 디버깅 할 수 있는 도구를 소개했다.

 

https://developer.chrome.com/blog/new-in-devtools-90/

What's New In DevTools (Chrome 90) - Chrome Developers

display: flex 혹은 inline-flex 설정을 한 경우 flex 박스가 표시된다. styles 탭에 open flexbox editor 버튼을 클릭하면 flex 디버깅이 가능한 창이 나타난다. 사용 가능한 태그는 다음과 같다.

• flex-direction : row, column
• flex-wrap : nowrap, wrap
• align-content : center, flex-start, flex-end, space-around, space-between, stretch
• justify-content : center, flex-start, flex-end, space-between, space-around, space-evenly
• align-items : center, flex-start, flex-end, stretch, baseline

flexbox editor에서 설정을 변경하면 화면에 적용되어 변한다.

flex-direction 디버깅

justify-content 디버깅