Flexbox 3 Columns with Sidebars


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

body {
max-width: 64rem; /*1024px width of parent containers*/
margin: 0 auto}  /* center containers */


div.full {
  display: flex; /*alert browser - this is flexbox */
  justify-content: center; /* center columns */
  flex-wrap: wrap;  /* wrap contents when necessary */
  gap : clamp(2rem , 5dvw , 4rem); /* adjusts spacing between 32px and 64px*/
}

div.column {
  flex : 1;
  border: solid 1px;
  text-align : center
}

div.left {
flex: 1;
}
div.middle {
flex : 3 ; /* Increase with of middle column */
}
div.right {
flex: 1;
}

p { 
  font-family: arial;
  font-size : 1.25rem; 
  margin : .25rem .5rem}


@media (max-width: 48rem) { /*768px*/
div.column.left , div.column.middle , div.column.right {
flex: 100%
}

}
</style>
</head>
<body>
<div class="full">
<div class="column left">
<p>Content</p>
</div>
 <div class="column middle">
<p>Content</p>
</div>
<div class="column right">
<p>Content</p>
</div>
</div>
</body>
</html>