Flexbox Lesson #2
Define the Structure
In this lesson we're going to define the parent elements of our Flexbox web page structure.
It is just a simple structure for building a semantic page.
Although flexbox can be used as just a tool along with conventional CSS, we're going to create a flexbox web page and then learn how to mix in conventional CSS for adding images and other things like lists and iframes.
Sounds confusing but we'll simplify as we progress.
Second Exercise
Let's add the CSS to our style sheet to define the settings for our head, nav , main and footer elements.
The code will be the same for each.
Copy and Paste this code into the style sheet below the closing bracket for the definition of the body section:
header , nav , main , footer {
display :flex; /* Alert browser to render flexbox */
flex-wrap : wrap; /* Allow items to wrap when necessary */
padding: clamp(1rem , 2dvw , 4rem) clamp(1.125rem, 5vw, 6rem);
border : solid 1px /*Temporary*/
}
🔴 Save flex-tutorial.html
👀 Look at the web page with your browser.
The Result
Four stacked boxes inside a red border. If this is what you see or something similar, you're ready to proceed. Variations will occur if you changed the width definition to a max-width setting.
We'll remove the borders in the last exercise.
Explanation
When working in flexbox, don't be confused by the word axis. The x axis is horizontal. The y axis is vertical.
When be build along the x axis we're working with rows. In rows our page elements line up side by side.
The Row is the default direction in flexbox. We'll be using a lot of defaults, shorthand and short cuts in this tutorial. You can learn things like flex-direction and flex-basis later.
We will demonstrate the use of flex-direction in Lesson #7.
header , nav , main , footer {
display :flex;
flex-wrap : wrap;
padding: clamp(1rem , 2dvw , 4rem) clamp(1.125rem, 5vw, 6rem);
border : solid 1px /*Temporary*/
}
In our CSS display: flex; just alerts the browser that we're using flexbox.
flex-wrap : wrap; says allow the items in the container to wrap when necessary. We'll see how that works in a later lesson.
I've mentioned before you should be converting to ems or rems and viewport calculations for things like font-size, margins, padding and even line-height. If you didn't access the clamp tutorial, you should do that before you go on.
The conventional padding property is coded as padding : 0 0;
Here we use the clamp function twice to preset our padding for our parent containers.
Lastly, we add a temporary border so that we can see the structure as we build it.