Flexbox Layouts (1)

The following files are required for this lesson:

Introduction

This lesson will be taught in two parts:

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.

Download the demo-flexbox-content.zip file and extract its contents to a folder named demo-flexbox-content.
Open index.html in your browser to see something like:
The first result you need looks like:
In your code editor examine the code below:
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:

You should now see:
Now you can change the justify-content to different values:
1. flex-end:
2. center:
3. >space-between:
4. space-around:
5. space-evenly:
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):
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:
Now examine the other values for align-items:
1. flex-start:
2. flex-end:
3. center:
4. >baseline:
  
  Question: What is the difference between center and baseline?

Download the demo-flexbox-nav.zip file from Moodle and extract its contents to a folder named demo-flexbox-nav.
The goal of this demo should look like:
Open index.html in your browser to see something like:

Question: What do you think you need to do to achieve the desired output?
Add the following style rules to your styles.css file:
1. Style the <body> element:
2. Add a .flex-container class:
3. Style the <header>:
4. As the LOGO is really big, and the image used is an SVG, you can set the size of the logo using:
5. Now set the margins for the <li> elements:
6. Next, the two hyperlinks, sign-in and sign-up, need to be styled for hover effect and to make them look like buttons:
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:
Optionally, you can add hyperlinks to the menu <li>’s and style them appropriately.