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.

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.

Odkryj Flexbox

Modyfikowanie układów w edytorze Flexbox

Układy flexbox możesz modyfikować wizualnie za pomocą edytora Flexbox. Tak na przykład możesz wyśrodkować tekst <h1> na stronie demonstracyjnej w kontenerze <div class="container">.

  1. Sprawdź element kontenera.
  2. W panelu Style zobaczysz przycisk flexbox (edytor Flexbox) obok deklaracji display: flex.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, możesz kliknąć 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 zostały dodane w panelu Style.

Sprawdzenie układu flexbox

Możesz najechać kursorem na element Flexbox w panelu Elementy, aby zobaczyć układ. Nakładka pojawi się nad elementem i będzie mieć linię przerywaną pokazującą umiejscowienie jej zawartoś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. Na przykład gdy zmienisz flex-direction na column, ikony w edytorze elastycznym będą odpowiednio obrócone. Nakładka również jest aktualizowana natychmiast.

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 tej stronie.

Panel układu

Możesz przełączać nakładkę każdego elementu Flexbox, zaznaczając pole wyboru obok niego. Przypomina to kliknięcie ikony 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 znajdującą się obok niego ikonę selektora.