이 가이드에서는 페이지에서 Flexbox 요소를 검색하고 요소 패널에서 Flexbox 레이아웃을 검사하고 수정하는 방법을 설명합니다.
이 도움말의 스크린샷은 Flexbox로 텍스트 요소 중앙에 배치 웹페이지에서 가져온 것입니다.
CSS Flexbox 알아보기
페이지의 HTML 요소에 display: flex 또는 display: inline-flex가 적용된 경우
요소 패널에서 이미지 옆에 flex 배지가 표시됩니다.
Flexbox 편집기로 레이아웃 수정하기
flexbox 편집기를 사용하여 Flexbox 레이아웃을 시각적으로 수정할 수 있습니다. 예를 들어 다음은 이 데모 페이지의 <h1> 텍스트를 컨테이너 <div class="container"> 내에 중앙에 배치하는 방법입니다.
- 컨테이너 요소를 검사합니다.
- 스타일 창에서
display: flex선언 옆에 Flexbox 편집기 버튼이 표시됩니다.
- 이 아이콘을 클릭하여 플렉스박스 편집기를 엽니다. 편집기에 flexbox 속성 목록이 표시됩니다. 각 속성의 값 옵션이 아이콘 버튼으로 표시됩니다.
justify-content: center및align-items: center버튼을 클릭하여 화면 중앙에 텍스트를 배치할 수 있습니다.
- 이제 텍스트가 중앙에 표시됩니다.
justify-content: center및align-items: center선언이 Styles 창에 추가된 것을 볼 수 있습니다.
Flexbox 레이아웃 검사
요소 패널에서 flexbox 요소 위로 마우스를 가져가면 레이아웃이 시각화됩니다. 오버레이는 콘텐츠와 항목의 위치를 보여주기 위해 점선으로 배치된 요소 위에 표시됩니다.
또는 배지를 클릭하여 플렉스박스 오버레이의 표시를 전환할 수 있습니다.
값을 justify-content: flex-end로 변경해 보세요. 오버레이가 적절하게 변경됩니다.
플렉스 편집기의 아이콘은 컨텍스트를 인식합니다. 레이아웃 방향에 따라 변경됩니다. 예를 들어 flex-direction를 column로 변경하면 Flex 편집기의 아이콘이 그에 따라 회전합니다. 오버레이도 즉시 업데이트됩니다.
Flexbox 오버레이 색상 조정
Layout 창을 열고 Flexbox 섹션까지 아래로 스크롤합니다. 여기에서 페이지의 모든 Flexbox 요소를 볼 수 있습니다.
옆에 있는 체크박스를 사용하여 각 Flexbox 요소의 오버레이를 전환할 수 있습니다. DOM 트리에서 badge를 클릭하는 것과 같습니다.
그 외에도 옆에 있는 색상 아이콘을 클릭하여 오버레이의 색상을 변경할 수 있습니다. 예를 들어 container 오버레이의 색상이 검은색으로 변경됩니다.
DOM 트리에서 Flexbox 요소로 이동하려면 옆에 있는 선택기 아이콘을 클릭하면 됩니다.