{"id":3746,"date":"2023-07-18T01:06:00","date_gmt":"2023-07-18T01:06:00","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3746"},"modified":"2025-08-28T23:57:33","modified_gmt":"2025-08-28T23:57:33","slug":"exercise-flexbox","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-three\/exercise-flexbox\/","title":{"rendered":"Exercise: Flexbox"},"content":{"rendered":"\n

Today in class we will explore the use of flexbox by working on exercises from mozilla.developer.  <\/a><\/p>\n\n\n\n

Be sure to make a new html file for each exercise.<\/p>\n\n\n\n

Exercise 1: Wrapping<\/strong><\/a><\/h3>\n\n\n\n
    \n
  1. You should have completed the Simple Example<\/a> as homework. If not, do so now (we’ll call it Exercise 0).<\/li>\n\n\n\n
  2. Now do the exercise titled Wrapping<\/a>.<\/li>\n<\/ol>\n\n\n\n

    Exercise 2: Flexible Sizing.<\/a><\/h3>\n\n\n\n

    Click here to do the exercise. <\/a><\/p>\n\n\n\n

    Exercise 3: Horizontal and vertical alignment<\/a><\/h3>\n\n\n\n

    This exercise<\/a> explores just what the title implies: horizontal and vertical alignment of flexbox content. In flexbox, by default, content (in this exercise the content is made up of buttons) is spread along the horizontal axis and ‘stretches’  to fill the cross axis (aka<\/strong> vertical up and down axis).<\/p>\n\n\n\n

    I found their explanation about vertical stretching to be confusing until I played with the css code a while. A couple of tips.<\/p>\n\n\n\n

      \n
    1. To start this exercise, I recommend that you simply add div {display: flex; } <\/strong>to your CSS instead of the three items that they ask for.  Once you add the display:flex property, those buttons should stretch.<\/li>\n\n\n\n
    2. Afterward, add the other two properties to further explore alignment.<\/li>\n<\/ol>\n\n\n\n

      Exercise 4: Nested flex boxes<\/a><\/h3>\n\n\n\n

      This exercise<\/a> is basically descriptive and illustrates how to create a more complex layout using flexbox. Essentially, you copy the code, look at the file in your browser and then read about it. Not much of an exercise, but read it, go through the motions and do your best to gain an understanding of how nested flex boxes work.<\/p>\n\n\n\n

      <\/p>\n","protected":false},"excerpt":{"rendered":"

      Today in class we will explore the use of flexbox by working on exercises from mozilla.developer.   Be sure to make a new html file for each exercise. Exercise 1: Wrapping Exercise 2: Flexible Sizing. Click here to do the exercise.  Exercise 3: Horizontal and vertical alignment This exercise explores just what the title implies: horizontal and vertical alignment … Continue reading Exercise: Flexbox<\/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-3746","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3746","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=3746"}],"version-history":[{"count":10,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3746\/revisions"}],"predecessor-version":[{"id":4373,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3746\/revisions\/4373"}],"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=3746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}