The following files are required for this lesson:

Introduction

This lesson will be taught in two parts:

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps - Part 1: Flexbox Content

  1. Download the demo-flexbox-content.zip file and extract its contents to a folder named demo-flexbox-content.
  2. Open index.html in your browser to see something like:
    flexbox1-01.jpg
  3. The first result you need looks like:
    flexbox1-02.jpg
  4. In your code editor examine the code below:
    flexbox1-index-01.jpg
  5. Examine the code in styles.css and notice that there is no .flex class style rule created. Therefore, add the following rule, save, and refresh your browser:
    flexbox1-css-styles-01.jpg
    You should now see:
    flexbox1-02.jpg
  6. Now you can change the justify-content to different values:
    1. flex-end:
      flexbox1-03
    2. center:
      flexbox1-03
    3. >space-between:
      flexbox1-03
    4. space-around:
      flexbox1-03
    5. space-evenly:
      flexbox1-03
  7. The next flexbox property is align-items which allows the distribution on the cross axis (y-axis). Reset the justify-content to flex-start and add the following code to the class (justify-content: flex-start; is shown only for reference to where this code goes):
    flexbox1-css-styles-02.jpg
  8. As the result is the same as was shown in step 5, make the following change in your stylesheet before displaying the result in your browser:
    flexbox1-css-styles-03.jpg
    flexbox1-08.jpg
  9. Now examine the other values for align-items:
    1. flex-start:
      flexbox1-09
    2. flex-end:
      flexbox1-10
    3. center:
      flexbox1-11
    4. >baseline:
      flexbox1-12
      Question: What is the difference between center and baseline?

Steps - Part 2: Flexbox Nav

  1. Download the demo-flexbox-nav.zip file from Moodle and extract its contents to a folder named demo-flexbox-nav.
  2. The goal of this demo should look like:
    flexbox2-01.jpg
  3. Open index.html in your browser to see something like:
    flexbox2-02.jpg
    Question: What do you think you need to do to achieve the desired output?
  4. Add the following style rules to your styles.css file:
    1. Style the <body> element:
      flexbox2-css-styles-01
    2. Add a .flex-container class:
      flexbox2-css-styles-02
    3. Style the <header>:
      flexbox2-css-styles-03
      flexbox2-03
    4. As the LOGO is really big, and the image used is an SVG, you can set the size of the logo using:
      flexbox2-css-styles-04
      flexbox2-04
    5. Now set the margins for the <li> elements:
      flexbox2-css-styles-05
      flexbox2-05
    6. Next, the two hyperlinks, sign-in and sign-up, need to be styled for hover effect and to make them look like buttons:
      flexbox2-css-styles-06
      flexbox2-06
    7. When you hover your mouse over these simulated buttons, there is no visible change in their appearance. To get the desired effect add the following:
      flexbox2-css-styles-07
      flexbox2-07
  5. Optionally, you can add hyperlinks to the menu <li>’s and style them appropriately.

Summary

More properties of flexbox will be demonstrated in the next demo.

References

Module Home

DMIT1530 Home