Flexbox

The lesson you just completed is great as a learning exercise, but the overall layout has a big flaw: it is not responsive and hence doesn't work well for small devices such as cellphones. Web development today is all about flexible, responsive layouts that look and function as well (or better) on your phone as they do on your big monitor at home.  Flexbox is a (relatively) new CSS layout tool that is very handy for creating, as its name suggests, flexible layouts.

Before we go any further, follow this link and spend a few minutes reading about Flexbox. After class, especially during your next graded assignment, you may want to visit the site again for a more thorough read, and maybe even practice some of the exercises that it offers.

Putting Flexbox to work

At this point you should have read enough to have a 'fairly' clear idea of how Flexbox functions, so let's get started.

  1. Create a new html document named monkeyFlex.html and a new css document named flex.css.
    1. Save both into the div_layout folder from the previous exercise.
    2. Now connect the css file to the html file (you know how).
  2. In the css document, create a rule named section and set the display to flex, as in:
    section {display: flex; } .  At this point you have activated flexbox and any elements in your html document within the <section> </section> tags will be flexed!
  3. Add the following properties to section as well:
    1. width: 80%; The purpose of setting width to a percentage rather than an absolute value is so that section will change size based on the width of the browser.

    2. margin-left: auto; margin-right: auto; These values cause section to be centered in the browser.
    3. flex-wrap: wrap; This value causes content within section to wrap when content width exceeds the width of section. Without this property, excess content will either disappear off the edge of the browser window (Chrome, Safari) or shrink (Firefox);
  4.  Now insert monkee2.jpg, monkee3.jpg,  and monkee4.jpg  into your document, within the section tags, and test it.
  5. Chances are, you images are kind of bunched together when the browser window is wide enough to contain all of them. Let's fix that by adding another property:  justify-content: space-around;  This property will 'space' the images out to use all of the available space. Check it out.
  6. So far so good, but we still lack a couple of important elements: a header (page title) and navigation. Let's add those now.  Add the code shown at right to your css. While you are at it, set the font-size of header to something large like 32px, and the
    font-weight to 600;
  7. Next  add <header>  </header> tags just after the <body> tag and put text between those tags; something like Douglas Fir, for example.
  8. Now we need navigation.  Add the code shown in the screen capture to your css.

  9. Place <nav> </nav> tags just after your <section> tag (before the first image tag) and add the following set of links:
    1. <a href="bananasFlex.html">Birds and Bananas</a>
    2. <a href="waterfallFlex.html">Leyland</a>
    3. <a href="monkeyFlex.html">Monkeys! </a>
  10. Those links probably look awful so refer back to the link rollover lesson and add a background color, padding, a hover effect, and remove the underlining from those links.
  11. Test your page. If everything seems to be working properly, save monkeyFlex.html as waterfallFlex.html, and then as bananasFlex.html. Open the two new files, delete the monkey images, and add in new images for the appropriate animal, fruit or geographic feature.  Now test everything out again. Does it all work as expected?
Print Friendly, PDF & Email