{"id":18,"date":"2021-04-19T07:59:00","date_gmt":"2021-04-19T07:59:00","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=18"},"modified":"2026-02-20T07:28:27","modified_gmt":"2026-02-20T07:28:27","slug":"css-flexbox-w-google-chrome-devtools","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/css-flexbox-w-google-chrome-devtools\/","title":{"rendered":"CSS Flexbox w Google Chrome DevTools"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"731\" src=\"https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/04\/webdevs-blog_.jpg\" alt=\"\" class=\"wp-image-19\" srcset=\"https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/04\/webdevs-blog_.jpg 1300w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/04\/webdevs-blog_-300x169.jpg 300w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/04\/webdevs-blog_-1024x576.jpg 1024w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/04\/webdevs-blog_-768x432.jpg 768w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/04\/webdevs-blog_-640x360.jpg 640w, https:\/\/webdevs.blog\/pl\/wp-content\/uploads\/sites\/2\/2021\/04\/webdevs-blog_-700x394.jpg 700w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/webdevs.blog\/wp-content\/uploads\/2021\/04\/Screenshot-2021-04-19-at-10.15.17-1024x500.png\" alt=\"\" class=\"wp-image-124\"\/><\/figure>\n\n\n\n<p>W najnowsze wersji Chrome (90) w narz\u0119dziach dla developer\u00f3w zosta\u0142y udost\u0119pnione dedykowane funkcje pozwalaj\u0105ce na debugowanie flexboxa.<\/p>\n\n\n\n<p>Od teraz obok ka\u017cdego elementu HTML, kt\u00f3ry ma ustawiony w\u0142a\u015bciwo\u015b\u0107 display: <strong>flex<\/strong> b\u0105d\u017a <strong>inline-flex<\/strong> pojawi si\u0119 ma\u0142y badge, kt\u00f3ry poinformuje nas, \u017ce dany element ma ustawiony jeden z tych parametr\u00f3w.<\/p>\n\n\n\n<p>Z kolei w panelu ze stylami CSS znajduje si\u0119 ikona, pozwalaj\u0105ca na otwarcie mini-edytora flexbox. W ten spos\u00f3b mo\u017cna bardzo szybko i intuicyjnie zmodyfikowa\u0107 takie parametry jak flex-direction, flex-wrap, align-content, justify-content oraz align-items:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/webdevs.blog\/wp-content\/uploads\/2021\/04\/2021-04-19-10.29.29.gif\" alt=\"\" class=\"wp-image-128\"\/><\/figure>\n\n\n\n<p>Macie ju\u017c najnowsz\u0105 wersj\u0119 Chrome? Koniecznie wypr\u00f3bujcie ten ficzer \ud83d\ude42 <\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>W najnowsze wersji Chrome (90) w narz\u0119dziach dla developer\u00f3w zosta\u0142y udost\u0119pnione dedykowane funkcje pozwalaj\u0105ce na debugowanie flexboxa. Od teraz obok ka\u017cdego elementu HTML, kt\u00f3ry ma ustawiony w\u0142a\u015bciwo\u015b\u0107 display: flex b\u0105d\u017a inline-flex pojawi si\u0119 ma\u0142y badge, kt\u00f3ry poinformuje nas, \u017ce dany element ma ustawiony jeden z tych parametr\u00f3w. Z kolei w panelu ze stylami CSS znajduje [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":19,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[33,32,34],"class_list":["post-18","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-css-flexbox","tag-developer-tools"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":3,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":715,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/18\/revisions\/715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/19"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}