Sprawdzanie i debugowanie układów CSS Flexbox

Z tego przewodnika dowiesz się, jak wykrywać na stronie elementy Flexbox, a także sprawdzać i modyfikować układy tego formatu w panelu Elementy.

Zrzuty ekranu widoczne w tym artykule pochodzą ze strony Wyśrodkowanie elementu tekstowego za pomocą Flexbox.

Odkryj CSS Flexbox

Jeśli do elementu HTML na stronie zastosowano parametr display: flex lub display: inline-flex, w panelu Elementy zobaczysz obok niego plakietkę flex.

Modyfikowanie układów w edytorze Flexbox

Układy Flexbox możesz modyfikować wizualnie przy użyciu edytora Flexbox. Poniżej możesz na przykład wyśrodkować tekst <h1> tej strony demonstracyjnej w kontenerze <div class="container">.

1. Sprawdź element kontenera.
2. W panelu Style znajdziesz przycisk edytora Flexbox obok deklaracji display: flex.
3. Kliknij ją, aby otworzyć edytor Flexbox. W edytorze wyświetli się lista właściwości Flexbox. Opcje wartości każdej właściwości są wyświetlane w postaci przycisków.
4. Aby wyśrodkować tekst na ekranie, kliknij przyciski justify-content: center i align-items: center.
5. Tekst jest teraz wyśrodkowany. Zwróć uwagę, że w panelu Style dodano deklaracje justify-content: center i align-items: center.

Sprawdzanie układu Flexbox

Aby zobaczyć układ, najedź kursorem na element Flexbox w panelu Elementy. Nakładka pojawia się na elemencie, przerywając linią przerywaną, pokazując, w jakim miejscu znajduje się jego zawartość i elementy.

Możesz też kliknąć plakietkę, aby przełączyć wyświetlanie nakładki Flexbox.

Spróbuj zmienić wartość na justify-content: flex-end. Nakładka zostanie odpowiednio zmieniona.

Ikony w edytorze Flex są zależne od kontekstu. Zmienia się on zgodnie z kierunkiem układu. Jeśli na przykład zmienisz flex-direction na column, ikony w edytorze Flex zostaną odpowiednio obrócone. Nakładka jest też aktualizowana natychmiast.

Dostosowywanie koloru nakładki Flexbox

Otwórz panel Układ i przewiń w dół do sekcji Flexbox. Tutaj możesz zobaczyć wszystkie elementy Flexbox strony.

Możesz przełączać nakładkę każdego elementu Flexbox, korzystając z pola wyboru obok niego. Działa tak samo jak klikniesz badge w drzewie DOM.

Poza tym możesz zmienić kolor nakładki, klikając znajdującą się obok niej ikonę koloru. Na przykład kolor nakładki container zostanie zmieniony na czarny.

Aby przejść do elementu Flexbox w drzewie DOM, kliknij obok niego ikonę selektora.