– poznasz podstawy Flexbox
– nauczysz si\u0119 uk\u0142ada\u0107 elementy w rz\u0119dzie i kolumnie
– opanujesz wyr\u00f3wnywanie element\u00f3w (justify-content, align-items)
– wykonasz proste uk\u0142ady stron<\/p>\n\n\n\n
Najwa\u017cniejsze w\u0142a\u015bciwo\u015bci:
– display: flex
– flex-direction
– justify-content
– align-items
– gap<\/p>\n\n\n\n
Stw\u00f3rz kontener z 3 divami. Ustaw je obok siebie przy u\u017cyciu Flexbox.
– ka\u017cdy element: 100px x 100px
– dowolne kolory
– dodaj border do kontenera<\/p>\n\n\n\n
Wy\u015brodkuj jeden element w kontenerze:
– poziomo
– pionowo
U\u017cyj justify-content i align-items.<\/p>\n\n\n\n
Zbuduj poziome menu nawigacyjne:
– elementy w jednej linii
– odst\u0119py mi\u0119dzy linkami
– wy\u015brodkowanie menu na stronie<\/p>\n\n\n\n
Stw\u00f3rz 3 kolumny:
– pierwsza kolumna: flex 2
– druga i trzecia: flex 1
– wszystkie w jednym rz\u0119dzie<\/p>\n\n\n\n
Stw\u00f3rz uk\u0142ad karty produktu:
– obrazek po lewej
– tekst po prawej
– u\u017cyj display: flex<\/p>\n\n\n\n
Stw\u00f3rz prost\u0105 stron\u0119:
– nag\u0142\u00f3wek
– menu poziome
– sekcja g\u0142\u00f3wna z 2 kolumnami
– stopka<\/p>\n","protected":false},"excerpt":{"rendered":"
Cele lekcji – poznasz podstawy Flexbox– nauczysz si\u0119 uk\u0142ada\u0107 elementy w rz\u0119dzie i kolumnie– opanujesz wyr\u00f3wnywanie element\u00f3w (justify-content, align-items)– wykonasz proste uk\u0142ady stron Lekcja 1 \u2013 podstawy Flexbox Najwa\u017cniejsze w\u0142a\u015bciwo\u015bci:– display: flex– flex-direction– justify-content– align-items– gap Zadanie 1 \u2013 pierwszy flex Stw\u00f3rz kontener z 3 divami. Ustaw je obok siebie przy u\u017cyciu Flexbox.– ka\u017cdy element:…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-281","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=\/wp\/v2\/posts\/281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=281"}],"version-history":[{"count":1,"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=\/wp\/v2\/posts\/281\/revisions\/282"}],"wp:attachment":[{"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mateusz-siemiez.entervive.pl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}