Sprawdzanie i debugowanie układów CSS Flexbox

Jecelyn Yeen

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

Zrzuty ekranu wyświetlane w tym artykule pochodzą z tej strony Wyśrodkowanie elementu tekstowego przy użyciu Flexbox.

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.

Poznaj Flexbox

Modyfikowanie układów w edytorze Flexbox

Układy flexbox możesz modyfikować wizualnie za pomocą edytora Flexbox. 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 ją, aby otworzyć edytor Flexbox. Edytor wyświetla listę właściwości Flexbox. Opcje wartości każdej właściwości są wyświetlane jako przyciski ikon. 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.

Sprawdzenie układu flexbox

Możesz najechać kursorem na element Flexbox w panelu Elementy, aby zobaczyć układ. Nakładka pojawia się na elemencie z wyraznymi liniami, które wskazują położenie treści i elementów.

najedź 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. Nakładka zostanie odpowiednio zmieniona.

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 wartość 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 strony Flexbox.

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żna również zmienić kolor nakładki, klikając znajdującą się obok niej ikonę koloru. Na przykład kolor nakładki container zmieni się na czarny.

zmień kolor nakładki

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