Structure

Flexbox used as a tool makes building web page structure with multiple columns much easier.

When to Use Flexbox

Sample ImageUse flexbox to build your web page structure. Then use conventional CSS in child containers for text flow and image alignment.

You can use text-align and the float property inside child containers in flexbox.

Clamp It

Learn to use the clamp function to preset font-size, line-height, padding and margins, instead of using media queries.

Start Out Ahead!!

<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox 3 Equal Columns</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   margin:0;
	padding : 0;

}

body {
	max-width: 100dvw; /*100% of viewport*/
	min-height: 100dvh;
	font-family: Helvetica;
	box-sizing : border-box;
} 

div.main {
   display: flex; /*alert browser - this is flexbox */
   justify-content: center; /* center columns */
   flex-wrap: wrap;  /* wrap columns when necessary */
   gap : clamp(1rem , 1rem + .75dvw , 2rem); /* adjusts spacing between 16px and 32px*/
}


div.left { /* Child container */
	flex: 1;
	padding : 2dvw; /* 2% of viewport */
	background : whitesmoke;
	border :solid 1px
}
div.middle { /* Child container */
	flex : 1 ; /* default size */
	padding : 2dvw;
	border :solid 1px
}
div.right { /* Child container */
   flex: 1;
   padding : 2dvw;
   background : whitesmoke;
   border :solid 1px
}

h1 , h2 {
   font-size: clamp(1.5rem , 1.5rem + .5dvw , 2rem) ; /* Adjusts from 24px to 32px */
	line-height: clamp(1.8rem , 1.8rem + .5dvw , 2.4rem); /* 1.2 to 1.5 times size of text */
	color: dodgerblue;
   text-align :center;
	text-shadow : 1px 1px 2px #000
}

p { 
  font-size : clamp( 1.125rem , 1.125rem + .25dvw , 1.375rem ); /* Adjusts between 18px and 22px */
  line-height: clamp(1.35rem , 1.35rem + .25dvw , 1.625rem); /* 1.2 to 1.5 times size of text */
  text-indent: 1.25rem;
   margin : clamp(.5rem , .5rem + .25dvw , 1rem ) 0 ;
  text-align: left;}

img.l-img {
max-width : 100%;
float: left;
margin : 1dvw; 
box-shadow : 1px 1px 6px #000
}

pre {
   font-size : 1.125rem
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-spaprece: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

@media (max-width: 52rem) { /*832px*/
div.left , div.middle , div.right { /* Force columns to wrap */
  flex: 100%
}

}
</style>
</head>
<body>
<div class="main">
<div class="left">
<h2>Structure</h2>
<p>Flexbox used as a tool makes building web page structure with multiple columns much easier.</p>
</div>
 <div class="middle">
<h1>When to Use Flexbox</h1>
<p><img class="l-img" src="images/pugs100.avif" alt="Sample Image" title="Good morning Pugsley" onerror="this.src='images/pugs100.jpg'">Use flexbox to build your web page structure. Then use conventional CSS in child containers for text flow and image alignment.</p>
<p>You can use text-align and the <a href="float-property.html">float property</a> inside child containers in flexbox.</p>

</div>
<div class="right">
<h2>Clamp It</h2>
<p>Learn to use the <a href="clamp.html">clamp function</a> to preset font-size, line-height, padding and margins, instead of using media queries.</p>
<p><b>Start Out Ahead!!</b></p>
</div>
</div>
</body>
</html>