CSS Flexbox w Google Chrome DevTools

W najnowsze wersji Chrome (90) w narzędziach dla developerów zostały udostępnione dedykowane funkcje pozwalające na debugowanie flexboxa.

Od teraz obok każdego elementu HTML, który ma ustawiony właściwość display: flex bądź inline-flex pojawi się mały badge, który poinformuje nas, że dany element ma ustawiony jeden z tych parametrów.

Z kolei w panelu ze stylami CSS znajduje się ikona, pozwalająca na otwarcie mini-edytora flexbox. W ten sposób można bardzo szybko i intuicyjnie zmodyfikować takie parametry jak flex-direction, flex-wrap, align-content, justify-content oraz align-items:

Macie już najnowszą wersję Chrome? Koniecznie wypróbujcie ten ficzer 🙂

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Nasza pasja do technologii nie kończy się na dostarczaniu wnikliwych treści poprzez ten blog. Z nieukrywaną radością ogłaszamy uruchomienie naszej platformy, która oferuje szereg kursów technologicznych, specjalnie dostosowanych do entuzjastów takich jak Ty.

Tematy

agencja interaktywna animacje animate Block Theme Branża IT bug CSS dostępność www Editor edytor blokowy Flex Gap FSE Full Site Editing GIT GIT Submodules Gutenberg HTTP/2 HTTP/3 IT JS klient Memcached Optimization plik SVG Praca praca w IT Rozmowy o WordPress strona www strony www SVG szkolenia WordPress Text-overflow theme.json tworzenie stron www wcag web accessibility Web development webkit line clamp Wordpress Workflow wp postmeta api wp transient Własna firma zarządzanie projektami zlecenie