💪 YourFlexboxSite

   Maybe a Slogan

Single Column

This as about as basic as you can get using flexbox.

Copy the code from the bottom of the web page and save it with a .html extension.

You can use the float property for positioning images in the left , middle and right columns; also in the 3 column footer.

Copy the embedded style sheet into a text file and save it in the same folder where you save this page as flex.css. Then remove the comment brackets from the link above the embedded style sheet.

You should also delete the ugly borders. We added them to help you see how the margins and padding work.

Column One

A lttle bit of content. Flex the web page to mini ipad size, about 700 pixels.

Column Two

A lttle bit of content. Flex the web page to mini ipad size, about 700 pixels.

 

 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="flex.css" type="text/css">-->
<style>
*{margin:0 0 0 0;
padding:0 0 0 0}

body{
max-width: 80rem;
margin:0 auto;
font-family: arial, verdana, tahoma, sans-serif;
font-size: 1.375rem;
font-style:normal;
font-weight:normal;
color:#444;
background: whitesmoke;
}

 header , .flex-container , .column , footer  {
    margin: 0;
    padding:0;
    color: #444;
    background: #fff;
    border: solid 1px /* Remove after you see what's going on with margins and padding*/
    }

 header , .flex-container , footer  {
  display: flex;
  flex-wrap: wrap;
  padding: clamp(2rem, 5dvw, 3rem);
  
}

.column {
flex: 1;
}

.left {
margin: 0 2dvw 0 0 ; /*Right margin 2% of viewport*/
padding:0
}

.right , .middle {
margin: 0 ;
padding:0;
}

.ftr-left { 
flex: 1;
text-align: left
}
.ftr-middle { 
flex: 3; /*Widen for footer info*/
text-align: center
}

.ftr-right { 
flex: 1;
text-align: right
}

h1 , h2 {text-align: center}
p {text-indent: 1rem}

header p {
font-size: clamp(1.5rem, 5dvw, 3rem);
text-align: left;
text-indent: 0
}



.slogan {
font-size: clamp(1rem, 5dvw, 1.5rem);
font-style: oblique;
text-indent: 0 }

@media (max-width : 700px) {
 .column  {
flex: 100%;
}

.left {margin: 0 0 0 0}
}
</style>
</head>
<body>
<header id="heading">
<p>&#128170; YourFlexboxSite</p><p><span class="slogan">&nbsp;&nbsp;Maybe a Slogan</p></p>
</header>
<div class="flex-container">
<div class="column middle">
<h1>Single Column</h1>
<p>This as about as basic as you can get using flexbox.</p>
<p>Copy the code from the bottom of the web page and save it with a .html extension.</p>
<p>You can use the float property for positioning images in the left , middle and right columns; also in the 3 column footer.</p>
<p>Copy the embedded style sheet into a text file and save it in the same folder where you save this page as <b>flex.css</b>. Then remove the comment brackets from the link above the embedded style sheet.</p>
<p>You should also delete the ugly borders. We added them to help you see how the margins and padding work.</P>
</div>
</div>

<div class="flex-container">
<div class="column left">
<h2>Column One</h2>
<p>A lttle bit of content. Flex the web page to mini ipad size, about 700 pixels.</p>

</div>
<div class="column right">
<h2>Column Two</h2>
<p>A lttle bit of content. Flex the web page to mini ipad size, about 700 pixels.</p>


</div>
</div>
<footer>
<div class="ftr-left">
<a href="#heading">Left</a>
</div>

<div class="ftr-middle">
<p>© 2025 YourFlexboxSite</p>
</div>

<div class="ftr-right">
<a href="#heading">Right</a>
</div>
</footer>
</body>
</html>