{"id":586,"date":"2024-06-14T03:19:00","date_gmt":"2024-06-14T01:19:00","guid":{"rendered":"https:\/\/projektninja.com\/devblog\/?p=586"},"modified":"2024-06-15T18:32:12","modified_gmt":"2024-06-15T16:32:12","slug":"responsywne-fluid-boxy","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/bajery\/responsywne-fluid-boxy\/","title":{"rendered":"Responsywne Fluid Boxy: Elastyczne Layouty w CSS"},"content":{"rendered":"\n<p>Tworzenie <strong>responsywnych<\/strong> stron internetowych sta\u0142o si\u0119 \u0142atwiejsze dzi\u0119ki <strong>CSS<\/strong>. Jednym z kluczowych element\u00f3w s\u0105 <strong>fluid boxy<\/strong>, kt\u00f3re p\u0142ynnie dostosowuj\u0105 si\u0119 do dost\u0119pnej przestrzeni. Dzi\u0119ki odpowiedniemu u\u017cyciu w\u0142a\u015bciwo\u015bci <strong>flex<\/strong> i <strong>media queries<\/strong>, mo\u017cemy stworzy\u0107 elastyczne layouty, kt\u00f3re b\u0119d\u0105 wygl\u0105da\u0107 \u015bwietnie na ka\u017cdym urz\u0105dzeniu.<\/p>\n\n\n\n<p>Aby zacz\u0105\u0107, definiujemy zmienne odst\u0119p\u00f3w:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n  --odstepy-boxow box\u00f3w: 1rem;\n}<\/code><\/pre>\n\n\n\n<p>Nast\u0119pnie w kontenerze ustawiamy <strong>flex-wrap<\/strong> i <strong>gap<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kontener{\n  display:flex;\n  flex-wrap:wrap;\n  gap: var(--odstepy-boxow);\n}<\/code><\/pre>\n\n\n\n<p>Na koniec definiujemy szeroko\u015b\u0107 element\u00f3w w zale\u017cno\u015bci od przedzia\u0142\u00f3w:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (zakres){\n  .obiekt{\n    width:calc(100% - var(--odstepy-boxow) * (2 - 1))\/2);\/*dw\u00f3jka oznacza dwie kolumny*\/\n}<\/code><\/pre>\n\n\n\n<p>Dzi\u0119ki takiemu podej\u015bciu nasze <strong>boxy<\/strong> b\u0119d\u0105 si\u0119 p\u0142ynnie skalowa\u0107, zapewniaj\u0105c estetyczny wygl\u0105d i czytelno\u015b\u0107 tre\u015bci na r\u00f3\u017cnych urz\u0105dzeniach.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Przydatne linki:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" title=\"\">Wprowadzenie do Flexboxa<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\">MDN Web Docs: Media Queries<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Zobacz, jak dzi\u0119ki CSS stworzy\u0107 responsywne i elastyczne layouty za pomoc\u0105 fluid box\u00f3w. Naucz si\u0119 praktycznych technik, kt\u00f3re u\u0142atwi\u0105 tworzenie stron wygl\u0105daj\u0105cych \u015bwietnie na ka\u017cdym urz\u0105dzeniu.<\/p>\n","protected":false},"author":1,"featured_media":589,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[25,256,255,253,254,258,257,137],"class_list":["post-586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bajery","tag-css","tag-flexbox","tag-frontend","tag-layouty","tag-media-queries","tag-projektowanie-stron","tag-responsywne-strony","tag-web-development"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=586"}],"version-history":[{"count":3,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/586\/revisions"}],"predecessor-version":[{"id":592,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/586\/revisions\/592"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/589"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}