{"id":3742,"date":"2023-07-18T01:04:37","date_gmt":"2023-07-18T01:04:37","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3742"},"modified":"2025-08-28T23:31:43","modified_gmt":"2025-08-28T23:31:43","slug":"flexbox-more","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-three\/flexbox-more\/","title":{"rendered":"Flexbox & More"},"content":{"rendered":"\n

Flexbox<\/h1>\n\n\n\n

Introduction to CSS layout<\/a><\/h3>\n\n\n\n

Although this lesson is titled Flexbox, we begin with an overview of CSS layout which will help you to understand how Flexbox compares to other, more traditional, layout tools such as floats (float: left, float:right) and positioning (relative, absolute, fixed). This page also provides a soft introduction to a CSS grid, a relatively new system for two dimensional layout.<\/p>\n\n\n\n

I encourage you to not only read through this section, but to explore the examples they offer with Codepen when available. You can skip<\/strong> the section on Table Layout and the Multi-column layout section that comes afterward.<\/p>\n\n\n\n

Normal Flow<\/a><\/h3>\n\n\n\n

Give this page a quick but careful read. You may see a question or two on a quiz.<\/p>\n\n\n\n

Flexbox<\/a><\/h3>\n\n\n\n

At last!\u00a0 Read the entire page and complete the simple example under the heading\u00a0Introducing a simple example<\/a>.\u00a0<\/strong>We will complete the other exercises in class.<\/p>\n\n\n\n

Other Flexbook Resources (in case you really love it)<\/h4>\n\n\n\n
    \n
  1. A complete guide to flexbox<\/a><\/li>\n\n\n\n
  2. Free video course that requires a sign-up<\/a><\/li>\n<\/ol>\n\n\n\n

    Floats<\/a><\/h3>\n\n\n\n

    Read the exciting first paragraph “The Background of Floats,” and work through the “Simple Float Example” until you are sure that you understand it. The rest of the page is optional and will NOT show up on a quiz.<\/p>\n\n\n\n

    Positioning<\/a><\/h3>\n\n\n\n

    Positioning is important. Don’t leave this section until you thoroughly comprehend  relative, absolute, and fixed positioning, as well as the mysterious z-index property and, finally, STICKY positioning. I recommend working your way through the exercises. I did.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Flexbox Introduction to CSS layout Although this lesson is titled Flexbox, we begin with an overview of CSS layout which will help you to understand how Flexbox compares to other, more traditional, layout tools such as floats (float: left, float:right) and positioning (relative, absolute, fixed). This page also provides a soft introduction to a CSS … Continue reading Flexbox & More<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3688,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3742","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3742"}],"version-history":[{"count":2,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3742\/revisions"}],"predecessor-version":[{"id":4370,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3742\/revisions\/4370"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3688"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}