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. Zapraszamy po więcej tajników specjalistycznej wiedzy dla entuzjastów takich jak Ty.

Tematy

animacje animate Attribute inheritance Block Theme Branża IT bug Code Comments CSS CSS Flexbox developer tools Doc Blocks dostępność www Edge Edge computing Editor Flex Gap FSE Full Site Editing GIT GIT Submodules Gutenberg HTTP HTTP/2 HTTP/3 IT JS Memcached Optimization plik SVG Praca praca w IT Rozmowy o WordPress strony www SVG Text-overflow theme.json v-model Vue.js wcag web accessibility Web development webkit line clamp Wordpress wp postmeta api wp transient