{"id":1200,"date":"2022-03-08T06:49:57","date_gmt":"2022-03-08T06:49:57","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1200"},"modified":"2022-03-08T06:49:57","modified_gmt":"2022-03-08T06:49:57","slug":"positioning-flex-grid","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2022\/03\/08\/positioning-flex-grid\/","title":{"rendered":"Positioning, Flex, &amp; Grid."},"content":{"rendered":"\n<p>Positioning property will set the rules on how an element will be placed on the page. It has 5 values:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>static: it follows the order of html<\/li><li>relative: the element can go anywhere without messing up the flow of the html except for the one its attached to<\/li><li>absolute: its placement is based on the px of the document not an element<\/li><li>fixed: element will stay on the same spot at all times<\/li><li>sticky: its location is based on the scroll of the document<\/li><\/ul>\n\n\n\n<p>Flexbox makes it easier to create flexible design. It has 5 properties.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>flex-direction: determines the direction<\/li><li>flex-wrap: determines if it will have stop location and go to the next line or if it just go in one line<\/li><li>justify-content: determines how it will begin<\/li><li>align-items: determines how to align the items<\/li><li>align-content: organizes the space around the items<\/li><\/ul>\n\n\n\n<p>Grid layouts with rows and columns. Has 4 <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>grid-template-columns: determines the size of the layout<\/li><li>grid-template-rows: determines the size of each row<\/li><li>justify-content: aligns the grid<\/li><li>align-content: vertically align items<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Positioning property will set the rules on how an element will be placed on the page. It has 5 values: static: it follows the order of html relative: the element can go anywhere without messing up the flow of the html except for the one its attached to absolute: its placement is based on the &hellip; <a href=\"https:\/\/appliedartand.design\/lj\/2022\/03\/08\/positioning-flex-grid\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Positioning, Flex, &amp; Grid.&#8221;<\/span><\/a><\/p>\n","protected":false},"author":63,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178],"tags":[],"class_list":["post-1200","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp22"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1200"}],"version-history":[{"count":3,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1200\/revisions"}],"predecessor-version":[{"id":1204,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1200\/revisions\/1204"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}