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">
.
- Sprawdź element kontenera.
- W panelu Style znajdziesz przycisk edytora Flexbox obok deklaracji
display: flex
. - 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.
- Aby wyśrodkować tekst na ekranie, kliknij przyciski
justify-content: center
ialign-items: center
. - Tekst jest teraz wyśrodkowany. Zwróć uwagę, że w panelu Style dodano deklaracje
justify-content: center
ialign-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.