CreateaFreeWebsite

 with Responsive Web Design

Flexbox Tutorial #1

I'm assuming you have some coding experience. If not you should run through the check list in the red box and see if you are ready to start learning flexbox.

This tutorial will introduce you to some basic Flexbox procedures. Rather than throw the whole book at you at once we'll make use of default values and settings and give a list of things to learn at the end.

It will also touch on some other important procedures to help you advance in reponsive design like nesting elements in your style sheet and the use of the clamp function to eliminate needless media queries.

Most of the CSS in the tutorial will be added in blocks of nested elements. Learning this method will help you to keep your style sheets organized and easier to revise as you proceed.

I highly recommend that you visit our clamp function tutorial and try to see its value and gain some basic understanding before you proceed to the second exercise.

FIRST TIMERS!!

Things you'll need to know:
How to create new folders
How to Copy and Paste
How to find and use your Text Editor
How to use a browser offline
If you don't know how to do any of these things, start with:
How to Use This Tutorial.

💥Ready to work? Start the first Exercise!

First Exercise

You're going to create an html document in this exercise and Save it in your \htdocs folder

Copy and Paste the entire block of code into your Text Editor

This is the HTML code:
See Explanation Below



<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox Tutorial</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin:0 0 0 0;
padding:0 0 0 0;
box-sizing : border-box
}

body{
max-width: 100dvw; /* full device viewport width */
margin:0 auto; /* In case you want a max-width design */
min-height : 100dvh; /*just fill the devise window*/
min-width: 21rem ; /*336px*/
font-family: system-ui , arial, sans-serif;
font-size: clamp(1rem , 1rem + .25dvw , 1.375rem);  /*adjusts between 16 and 22 pixels*/
line-height : clamp(1.5rem , 1.5rem + .25dvw , 1.875rem ); /* 1.2 to 1.5 times text size */
font-style:normal;
color: #444;
background-color: #fff;
border: solid 2px #ff0000 /*Temporary*/
}

</style>
</head>
<body>
<header>

</header>
<nav>

</nav>

<main>

</main>
<footer>

</footer>
</body>
</html>

Note: Added temporary red border to help us see the structure as we build it. We'll add other borders as we go to help you see what's happening. You can remove them all in the last exercise.

 

🔴 Save the web page as flex-tutorial.html in the htdocs folder.

The .html extension is crucial.

👀 Once you save the HTML page you can look at the page with a browser. Right now you'll get a blank white page with a red border.

 

Explanation

This is just a skeleton for any typical Semantic web page. That's just a sexy way of saying it uses parent elements whose name descibes their intended purpose.

One line is added in the overall page settings that relates to Flexbox:
box-sizing : border-box

border-box tells the browser to include padding, margins and border in the actual size of the container.

Normally if you had a division whose width you set to 100px and you added a 16 pixel(1rem) margin to both sides the actual size of the box would be 132px.

border-box means maintain the 100 pixel width but include margins , padding and borders.

If you haven't already done it, you should be abandoning the use of pixels and embracing ems, rems and dynamic viewport.

Our short clamp tutorial covers the use of ems, rems , dvws and the clamp function

100dvw tells the browser to use 100% of the width of the viewing device. If you want to work with a more compact design change it to max-width and set a width. margin: 0 auto will center it for you.

min-height : 100dvh; If you'd like to see what this does, remove or comment it out temporarily and view the page.

min-width: keeps the page from shrinking beyond a width of 336 pixels.

Nesting Elements in CSS

This is a little known technique which makes for an organized style sheet. Some code editors may not support, so it could be a little confusing at first. Once learned it's the only way to go. I have yet to find a browser that doesn't support it.

We'll use this method to add each block of CSS to the style sheet.

 

Top