{"id":716,"date":"2023-09-18T07:11:00","date_gmt":"2023-09-18T05:11:00","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=716"},"modified":"2023-09-18T07:11:35","modified_gmt":"2023-09-18T05:11:35","slug":"jak-dziala-flexbox-w-css-porownanie-z-grid-i-przyklady-zastosowania","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/jak-dziala-flexbox-w-css-porownanie-z-grid-i-przyklady-zastosowania\/","title":{"rendered":"Jak dzia\u0142a Flexbox w CSS, por\u00f3wnanie z GRID i Przyk\u0142ady zastosowania"},"content":{"rendered":"

Flexbox (skr\u00f3t od „Flexible Box”) to jedno z narz\u0119dzi w CSS3, kt\u00f3re pozwala na bardziej zaawansowane i elastyczne zarz\u0105dzanie uk\u0142adem element\u00f3w wewn\u0105trz kontenera. Dzi\u0119ki Flexboxowi, deweloperzy maj\u0105 wi\u0119ksz\u0105 kontrol\u0119 nad rozmieszczeniem, wielko\u015bci\u0105 i kolejno\u015bci\u0105 element\u00f3w, niezale\u017cnie od ich pierwotnych rozmiar\u00f3w czy kolejno\u015bci w kodzie.<\/p>\n

Na pocz\u0105tku, zadajmy sobie pytanie,<\/p>\n

Czy Flexbox obs\u0142uguje GRID, jaka jest r\u00f3\u017cnica?<\/h2>\n

Nie, Flexbox i Grid to dwa r\u00f3\u017cne systemy uk\u0142adu w CSS<\/strong>, ale oba s\u0142u\u017c\u0105 do tworzenia zaawansowanych i responsywnych uk\u0142ad\u00f3w stron internetowych. Cho\u0107 oba narz\u0119dzia maj\u0105 pewne podobie\u0144stwa i mog\u0105 by\u0107 u\u017cywane razem na jednej stronie, maj\u0105 r\u00f3\u017cne cele i charakterystyki:<\/p>\n

    \n
  1. Flexbox (Flexible Box Layout)<\/strong>\n
      \n
    • Skoncentrowany g\u0142\u00f3wnie na uk\u0142adzie w jednym wymiarze, czyli albo wierszach, albo kolumnach.<\/li>\n
    • Idealny do uk\u0142adu mniejszych sk\u0142adnik\u00f3w lub do jednowymiarowych uk\u0142ad\u00f3w.<\/li>\n
    • W\u0142a\u015bciwo\u015bci, takie jak justify-content<\/code>, align-items<\/code>, flex-direction<\/code>, pozwalaj\u0105 na kontrol\u0119 rozmieszczenia i zachowania element\u00f3w w kontenerze flex.<\/li>\n<\/ul>\n<\/li>\n
    • CSS Grid Layout<\/strong>\n
        \n
      • Skoncentrowany na uk\u0142adach dwuwymiarowych, gdzie kontrolujesz zar\u00f3wno wiersze, jak i kolumny.<\/li>\n
      • Idealny do tworzenia z\u0142o\u017conych uk\u0142ad\u00f3w strony lub aplikacji.<\/li>\n
      • W\u0142a\u015bciwo\u015bci takie jak grid-template-columns<\/code>, grid-template-rows<\/code>, grid-gap<\/code> oraz grid-area<\/code> umo\u017cliwiaj\u0105 tworzenie zaawansowanych uk\u0142ad\u00f3w siatki.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

        Chocia\u017c Flexbox nie „obs\u0142uguje” Grida w sensie, \u017ce nie jest cz\u0119\u015bci\u0105 specyfikacji Flexbox, mo\u017cna u\u017cywa\u0107 obu system\u00f3w razem na tej samej stronie lub nawet w tym samym elemencie. Na przyk\u0142ad, kontener mo\u017ce by\u0107 ustawiony jako siatka (display: grid<\/code>), podczas gdy jego dzieci mog\u0105 by\u0107 kontenerami flex (display: flex<\/code>).<\/p>\n

        W praktyce wyb\u00f3r mi\u0119dzy Flexboxem a Gridem zale\u017cy od konkretnych potrzeb uk\u0142adu. W wielu przypadkach Flexbox jest bardziej ni\u017c wystarczaj\u0105cy, ale dla bardziej z\u0142o\u017conych uk\u0142ad\u00f3w, takich jak responsywne siatki lub uk\u0142ady z wieloma kolumnami i wierszami, Grid mo\u017ce by\u0107 bardziej odpowiedni. Warto zaznaczy\u0107, \u017ce oba narz\u0119dzia s\u0105 bardzo pot\u0119\u017cne i uzupe\u0142niaj\u0105 si\u0119 nawzajem.<\/p>\n

        Oto tabela por\u00f3wnuj\u0105ca zalety i wady Flexboxa oraz Grida:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
        Kryterium<\/th>\nFlexbox<\/th>\nCSS Grid<\/th>\n<\/tr>\n<\/thead>\n
        Zalety<\/strong><\/td>\n<\/td>\n<\/td>\n<\/tr>\n
        Cel<\/td>\nIdealny do jednowymiarowych uk\u0142ad\u00f3w (wiersze lub kolumny).<\/td>\nSkoncentrowany na uk\u0142adach dwuwymiarowych (wiersze i kolumny), idealny do z\u0142o\u017conych uk\u0142ad\u00f3w.<\/td>\n<\/tr>\n
        Elastyczno\u015b\u0107<\/td>\nBardzo elastyczny dla uk\u0142adu liniowego.<\/td>\nElastyczno\u015b\u0107 w tworzeniu z\u0142o\u017conych uk\u0142ad\u00f3w siatki.<\/td>\n<\/tr>\n
        Kontrola<\/td>\nDoskona\u0142a kontrola nad kolejno\u015bci\u0105, rozmiarem i wyr\u00f3wnaniem element\u00f3w.<\/td>\nPrecyzyjna kontrola nad rozmiarem, po\u0142o\u017ceniem i przestrzeni\u0105 mi\u0119dzy elementami siatki.<\/td>\n<\/tr>\n
        Responsywno\u015b\u0107<\/td>\n\u0141atwo\u015b\u0107 w tworzeniu responsywnych uk\u0142ad\u00f3w dla mniejszych komponent\u00f3w.<\/td>\nProste tworzenie responsywnych uk\u0142ad\u00f3w dla ca\u0142ych stron lub du\u017cych sekcji.<\/td>\n<\/tr>\n
        Wsp\u00f3\u0142praca z innymi narz\u0119dziami<\/td>\n\u0141atwo integruje si\u0119 z innymi technikami CSS.<\/td>\nDoskonale wsp\u00f3\u0142pracuje z Flexboxem oraz innymi technikami CSS.<\/td>\n<\/tr>\n
        Wady<\/strong><\/td>\n<\/td>\n<\/td>\n<\/tr>\n
        Kompleksno\u015b\u0107<\/td>\nMo\u017ce by\u0107 trudniejszy do zastosowania w bardziej z\u0142o\u017conych uk\u0142adach dwuwymiarowych.<\/td>\nWi\u0119ksza krzywa uczenia si\u0119 w por\u00f3wnaniu z Flexboxem dla pocz\u0105tkuj\u0105cych.<\/td>\n<\/tr>\n
        Wsparcie przegl\u0105darek<\/td>\nBardzo dobre wsparcie we wsp\u00f3\u0142czesnych przegl\u0105darkach, ale starsze wersje mog\u0105 wymaga\u0107 autoprefixer\u00f3w.<\/td>\nCho\u0107 wspierany przez nowoczesne przegl\u0105darki, starsze wersje mog\u0105 nie obs\u0142ugiwa\u0107 wszystkich funkcji.<\/td>\n<\/tr>\n
        U\u017cyteczno\u015b\u0107<\/td>\nDla niekt\u00f3rych uk\u0142ad\u00f3w, takich jak z\u0142o\u017cone siatki, Flexbox mo\u017ce nie by\u0107 idealnym rozwi\u0105zaniem.<\/td>\nMo\u017ce by\u0107 nadmierny dla prostych jednowymiarowych uk\u0142ad\u00f3w.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        Podsumowuj\u0105c, wyb\u00f3r mi\u0119dzy Flexboxem a Gridem zale\u017cy od konkretnych potrzeb projektu. Oba narz\u0119dzia maj\u0105 swoje miejsce w arsenale dewelopera front-end i cz\u0119sto s\u0105 u\u017cywane razem, aby uzyska\u0107 optymalne efekty.<\/p>\n

        Przyk\u0142ady zastosowania FlexBox i Grid<\/h2>\n

        Flexbox:<\/h3>\n
          \n
        1. Pasek nawigacyjny<\/strong>:\n
            \n
          • Je\u015bli chcesz utworzy\u0107 pasek nawigacyjny z elementami rozmieszczonymi horyzontalnie lub wertykalnie, Flexbox jest idealnym rozwi\u0105zaniem. Mo\u017cna \u0142atwo kontrolowa\u0107 odleg\u0142o\u015bci mi\u0119dzy elementami, ich kolejno\u015b\u0107 i wyr\u00f3wnanie.<\/li>\n<\/ul>\n<\/li>\n
          • Karty zawarto\u015bci<\/strong>:\n
              \n
            • Flexbox \u015bwietnie radzi sobie z tworzeniem kart zawarto\u015bci, kt\u00f3re maj\u0105 sta\u0142\u0105 szeroko\u015b\u0107, ale dynamiczn\u0105 wysoko\u015b\u0107 w oparciu o ich zawarto\u015b\u0107. Wszystkie karty zachowuj\u0105 t\u0119 sam\u0105 wysoko\u015b\u0107 niezale\u017cnie od ilo\u015bci zawarto\u015bci wewn\u0105trz.<\/li>\n<\/ul>\n<\/li>\n
            • Stopki<\/strong>:\n
                \n
              • Je\u015bli masz r\u00f3\u017cne kolumny link\u00f3w lub informacji w stopce, Flexbox umo\u017cliwia \u0142atwe ich rozmieszczenie i wyr\u00f3wnanie.<\/li>\n<\/ul>\n<\/li>\n
              • Horyzontalne przewijanie<\/strong>:\n
                  \n
                • Flexbox jest doskona\u0142ym wyborem do tworzenia list, kt\u00f3re przewijaj\u0105 si\u0119 w poziomie, na przyk\u0142ad listy miniaturek zdj\u0119\u0107 lub kategorii.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

                  CSS Grid:<\/h3>\n
                    \n
                  1. Uk\u0142ad strony<\/strong>:\n
                      \n
                    • Je\u015bli chcesz stworzy\u0107 ca\u0142y uk\u0142ad strony z nag\u0142\u00f3wkiem, nawigacj\u0105, g\u0142\u00f3wn\u0105 tre\u015bci\u0105, paskiem bocznym i stopk\u0105, Grid jest idealny. Pozwala on na precyzyjne rozmieszczenie ka\u017cdego z tych element\u00f3w na siatce.<\/li>\n<\/ul>\n<\/li>\n
                    • Galerie zdj\u0119\u0107<\/strong>:\n
                        \n
                      • Je\u015bli chcesz stworzy\u0107 galeri\u0119 zdj\u0119\u0107 o r\u00f3\u017cnych rozmiarach, ale chcesz, aby by\u0142y one uporz\u0105dkowane w estetyczny spos\u00f3b, Grid jest doskona\u0142ym wyborem.<\/li>\n<\/ul>\n<\/li>\n
                      • Kafelkowe interfejsy<\/strong>:\n
                          \n
                        • Interfejsy podobne do tych w stylu Windows Metro, gdzie masz r\u00f3\u017cne „kafelki” r\u00f3\u017cnych rozmiar\u00f3w rozmieszczone w siatce, s\u0105 idealne do tworzenia za pomoc\u0105 Grida.<\/li>\n<\/ul>\n<\/li>\n
                        • Z\u0142o\u017cone uk\u0142ady kolumn\/wierszy<\/strong>:\n
                            \n
                          • Je\u015bli masz uk\u0142ad z r\u00f3\u017cnymi kolumnami i wierszami, kt\u00f3re musz\u0105 by\u0107 precyzyjnie rozmieszczone i maj\u0105 r\u00f3\u017cne szeroko\u015bci\/lub wysoko\u015bci, Grid jest najlepszym rozwi\u0105zaniem.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

                            Jakie s\u0105 g\u0142\u00f3wne cechy Flexbox?<\/h2>\n

                            G\u0142\u00f3wne cechy Flexboxa:<\/p>\n

                              \n
                            1. Elastyczno\u015b\u0107<\/strong>: Flexbox pozwala na automatyczne dostosowywanie rozmiar\u00f3w element\u00f3w wewn\u0105trz kontenera, tak aby najlepiej wykorzysta\u0107 dost\u0119pn\u0105 przestrze\u0144, nawet je\u015bli rozmiary tych element\u00f3w nie s\u0105 wcze\u015bniej okre\u015blone.<\/li>\n
                            2. Kierunek<\/strong>: Za pomoc\u0105 Flexboxa mo\u017cna \u0142atwo zmienia\u0107 kierunek element\u00f3w w kontenerze, np. z poziomego na pionowy lub odwrotnie.<\/li>\n
                            3. Porz\u0105dek<\/strong>: Mo\u017cliwo\u015b\u0107 zmiany kolejno\u015bci wy\u015bwietlania element\u00f3w, niezale\u017cnie od kolejno\u015bci w kodzie HTML.<\/li>\n
                            4. Wyr\u00f3wnanie<\/strong>: Flexbox oferuje r\u00f3\u017cnorodne opcje wyr\u00f3wnywania element\u00f3w, zar\u00f3wno w pionie, jak i w poziomie.<\/li>\n<\/ol>\n

                              Aby zastosowa\u0107 Flexbox, najpierw musisz okre\u015bli\u0107 kontener jako flex za pomoc\u0105 w\u0142a\u015bciwo\u015bci display: flex;<\/code> lub display: inline-flex;<\/code>. Nast\u0119pnie mo\u017cna u\u017cywa\u0107 r\u00f3\u017cnych w\u0142a\u015bciwo\u015bci flexbox na tym kontenerze i jego dzieciach, aby kontrolowa\u0107 ich zachowanie i uk\u0142ad.<\/p>\n

                              Przyk\u0142ad:<\/p>\n

                              .kontener {<\/code>
                              \ndisplay: flex;<\/code>
                              \njustify-content: center; \/* wyr\u00f3wnanie element\u00f3w poziomo *\/<\/code>
                              \nalign-items: center; \/* wyr\u00f3wnanie element\u00f3w pionowo *\/<\/code>
                              \n}<\/code><\/p>\n

                              Kilka przydatnych w\u0142a\u015bciwo\u015bci Flexboxa:<\/p>\n

                                \n
                              • justify-content<\/code>: Kontroluje wyr\u00f3wnanie element\u00f3w wzd\u0142u\u017c g\u0142\u00f3wnej osi (domy\u015blnie pozioma).<\/li>\n
                              • align-items<\/code>: Kontroluje wyr\u00f3wnanie element\u00f3w wzd\u0142u\u017c osi poprzecznej (domy\u015blnie pionowa).<\/li>\n
                              • flex-direction<\/code>: Ustala kierunek g\u0142\u00f3wnej osi kontenera, np. row<\/code> (poziomy) lub column<\/code> (pionowy).<\/li>\n
                              • flex-wrap<\/code>: Decyduje, czy elementy maj\u0105 si\u0119 zawija\u0107 w kontenerze, je\u015bli nie mieszcz\u0105 si\u0119 w jednym rz\u0119dzie.<\/li>\n<\/ul>\n

                                Wyja\u015bnienie element\u00f3w Flexboxa i ich zastosowanie<\/h2>\n

                                W\u0142a\u015bciwo\u015bci dla kontenera flex:<\/h3>\n
                                  \n
                                1. display<\/strong>: Okre\u015bla, czy element ma by\u0107 kontenerem flex.\n
                                    \n
                                  • flex<\/code> (blokowy)<\/li>\n
                                  • inline-flex<\/code> (liniowy)<\/li>\n<\/ul>\n<\/li>\n
                                  • flex-direction<\/strong>: Okre\u015bla kierunek g\u0142\u00f3wnej osi.\n
                                      \n
                                    • row<\/code> (domy\u015blna warto\u015b\u0107; poziomo od lewej do prawej)<\/li>\n
                                    • row-reverse<\/code> (poziomo od prawej do lewej)<\/li>\n
                                    • column<\/code> (pionowo od g\u00f3ry do do\u0142u)<\/li>\n
                                    • column-reverse<\/code> (pionowo od do\u0142u do g\u00f3ry)<\/li>\n<\/ul>\n<\/li>\n
                                    • flex-wrap<\/strong>: Kontroluje, czy elementy maj\u0105 by\u0107 zawijane.\n
                                        \n
                                      • nowrap<\/code> (domy\u015blna warto\u015b\u0107; nie zawija)<\/li>\n
                                      • wrap<\/code> (zawija, je\u015bli potrzeba)<\/li>\n
                                      • wrap-reverse<\/code> (zawija w odwrotnym kierunku)<\/li>\n<\/ul>\n<\/li>\n
                                      • flex-flow<\/strong>: Skr\u00f3cona forma dla flex-direction<\/code> i flex-wrap<\/code>.<\/li>\n
                                      • justify-content<\/strong>: Okre\u015bla wyr\u00f3wnanie element\u00f3w wzd\u0142u\u017c g\u0142\u00f3wnej osi.\n
                                          \n
                                        • flex-start<\/code><\/li>\n
                                        • flex-end<\/code><\/li>\n
                                        • center<\/code><\/li>\n
                                        • space-between<\/code><\/li>\n
                                        • space-around<\/code><\/li>\n
                                        • space-evenly<\/code><\/li>\n<\/ul>\n<\/li>\n
                                        • align-items<\/strong>: Okre\u015bla wyr\u00f3wnanie element\u00f3w wzd\u0142u\u017c osi poprzecznej.\n
                                            \n
                                          • flex-start<\/code><\/li>\n
                                          • flex-end<\/code><\/li>\n
                                          • center<\/code><\/li>\n
                                          • baseline<\/code><\/li>\n
                                          • stretch<\/code><\/li>\n<\/ul>\n<\/li>\n
                                          • align-content<\/strong>: Okre\u015bla wyr\u00f3wnanie linii flex, gdy jest wi\u0119cej ni\u017c jedna linia.\n
                                              \n
                                            • flex-start<\/code><\/li>\n
                                            • flex-end<\/code><\/li>\n
                                            • center<\/code><\/li>\n
                                            • space-between<\/code><\/li>\n
                                            • space-around<\/code><\/li>\n
                                            • stretch<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

                                              W\u0142a\u015bciwo\u015bci dla element\u00f3w dzieci kontenera flex:<\/h3>\n
                                                \n
                                              • order<\/strong>: Okre\u015bla kolejno\u015b\u0107, w jakiej element powinien si\u0119 pojawia\u0107 w kontenerze. Domy\u015blna warto\u015b\u0107 to 0.<\/li>\n<\/ul>\n

                                                .element {<\/code>
                                                \norder: 2; \/* Element zostanie wy\u015bwietlony jako drugi, niezale\u017cnie od jego pozycji w kodzie HTML *\/<\/code>
                                                \n}<\/code><\/p>\n

                                                  \n
                                                • flex-grow<\/strong>: Okre\u015bla, jak wiele dost\u0119pnej przestrzeni w kontenerze powinien zaj\u0105\u0107 dany element w stosunku do innych element\u00f3w.<\/li>\n<\/ul>\n

                                                  .element {<\/code>
                                                  \nflex-grow: 3; \/* Element b\u0119dzie rosn\u0105\u0107 trzy razy szybciej ni\u017c inne elementy o domy\u015blnej warto\u015bci flex-grow (1) *\/<\/code>
                                                  \n}<\/code><\/p>\n

                                                    \n
                                                  • flex-shrink<\/strong>: Okre\u015bla, jak element ma si\u0119 kurczy\u0107, je\u015bli nie ma wystarczaj\u0105co miejsca w kontenerze.<\/li>\n<\/ul>\n

                                                    .element {<\/code>
                                                    \nflex-shrink: 2; \/* Element b\u0119dzie kurczy\u0107 si\u0119 dwa razy szybciej ni\u017c inne elementy o domy\u015blnej warto\u015bci flex-shrink (1) *\/<\/code>
                                                    \n}<\/code><\/p>\n

                                                      \n
                                                    • flex-basis<\/strong>: Okre\u015bla domy\u015blny rozmiar elementu przed rozdzieleniem dost\u0119pnej przestrzeni.<\/li>\n<\/ul>\n

                                                      .element {<\/code>
                                                      \nflex-basis: 200px; \/* Domy\u015blny rozmiar elementu to 200px przed podzia\u0142em dost\u0119pnej przestrzeni *\/<\/code>
                                                      \n}<\/code><\/p>\n

                                                        \n
                                                      • flex<\/strong>: Skr\u00f3cona forma dla flex-grow<\/code>, flex-shrink<\/code> i flex-basis<\/code>.<\/li>\n<\/ul>\n

                                                        .element {<\/code>
                                                        \nflex: 2 1 150px; \/* flex-grow: 2, flex-shrink: 1, flex-basis: 150px *\/<\/code>
                                                        \n}<\/code><\/p>\n

                                                          \n
                                                        • align-self<\/strong>: Pozwala na indywidualne wyr\u00f3wnanie danego elementu, je\u015bli chcemy, aby zachowywa\u0142 si\u0119 inaczej ni\u017c inne elementy w kontenerze.<\/li>\n<\/ul>\n

                                                          .element {<\/code>
                                                          \nalign-self: center; \/* Wyr\u00f3wnuje element w centrum wzd\u0142u\u017c osi poprzecznej, niezale\u017cnie od ustawie\u0144 kontenera *\/<\/code>
                                                          \n}<\/code><\/p>\n

                                                          Wymienione wy\u017cej w\u0142a\u015bciwo\u015bci Flexbox pozwalaj\u0105 na precyzyjn\u0105 kontrol\u0119 nad zachowaniem i rozmieszczeniem element\u00f3w wewn\u0105trz kontenera flex. Dzi\u0119ki nim mo\u017cna tworzy\u0107 zaawansowane uk\u0142ady z du\u017c\u0105 elastyczno\u015bci\u0105 i precyzj\u0105.<\/p>\n

                                                          Kiedy ju\u017c zrozumiesz podstawy Flexboxa, b\u0119dziesz m\u00f3g\u0142 \u0142\u0105czy\u0107 te w\u0142a\u015bciwo\u015bci w r\u00f3\u017cny spos\u00f3b, aby uzyska\u0107 po\u017c\u0105dane efekty w uk\u0142adzie strony. Flexbox sta\u0142 si\u0119 podstawowym narz\u0119dziem dla wielu deweloper\u00f3w stron internetowych dzi\u0119ki swojej wszechstronno\u015bci i \u0142atwo\u015bci u\u017cycia.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                                          Flexbox (skr\u00f3t od „Flexible Box”) to jedno z narz\u0119dzi w CSS3, kt\u00f3re pozwala na bardziej zaawansowane i elastyczne zarz\u0105dzanie uk\u0142adem element\u00f3w wewn\u0105trz kontenera. Dzi\u0119ki Flexboxowi, deweloperzy maj\u0105 wi\u0119ksz\u0105 kontrol\u0119 nad rozmieszczeniem, wielko\u015bci\u0105 i kolejno\u015bci\u0105 element\u00f3w, niezale\u017cnie od ich pierwotnych rozmiar\u00f3w […]<\/p>\n","protected":false},"author":1,"featured_media":145,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[242,241,47],"class_list":["post-716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-flexbox","tag-grid","tag-selektory-w-css"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=716"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/716\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/145"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}