Sprawdzanie i debugowanie układów CSS Flexbox

Jecelyn Yeen

Z tego przewodnika dowiesz się, jak znajdować elementy flexbox na stronie oraz sprawdzać i modyfikować układy flexbox w panelu Elementy.

Zrzuty ekranu w tym artykule pochodzą ze strony Centering a text element with Flexbox (Centerowanie elementu tekstowego za pomocą Flexboxa).

Poznaj CSS flexbox

Jeśli element HTML na stronie ma zastosowany element display: flex lub display: inline-flex, obok niego w panelu Elementy zobaczysz plakietkę flex.

Odkryj Flexbox

Modyfikowanie układów za pomocą edytora flexbox

Za pomocą edytora flexboxa możesz wizualnie modyfikować układy flexboxa. Oto przykład sposobu wyśrodkowania tekstu <h1> na stronie demonstracyjnej w jej kontenerze <div class="container">.

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

Sprawdź układ flexbox

Aby zwizualizować układ, najedź kursorem na element flexbox w panelu Elementy. Nakładka pojawia się na elemencie z wyraznymi liniami, które wskazują położenie treści i elementów.

najechać kursorem na element flexbox;

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

zmień justify-content na flex-end

Spróbuj zmienić wartość na justify-content: flex-end. W zależności od tego zmienia się nakładka.

justify-content: flex-end

Ikony w edytorze flex są zależne od kontekstu. Zmienia się on odpowiednio do kierunku układu. Jeśli na przykład zmienisz flex-direction na column, ikony w Edytorze elastycznych elementów zostaną odpowiednio obrócone. Nakładka jest też aktualizowana od razu.

Dostosowywanie koloru nakładki flexbox

Otwórz panel Układ i przewiń w dół do sekcji Flexbox. Tutaj możesz wyświetlić wszystkie elementy flexbox na stronie.

Panel układu

Za pomocą pola wyboru obok każdego elementu flexbox możesz włączać i wyłączać nakładkę. To tak, jakbyś kliknął badge w drzewie DOM.

Możesz też zmienić kolor nakładki, klikając ikonę koloru obok. Na przykład kolor nakładki container zmienia się na czarny.

zmień kolor nakładki

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