Responsive flexbox columns - equal/unequal width/height

Report · Jan 14, 2020

Hello all

We're using flexbox to build two web pages both featuring a main two column layout that need to be responsive so when viewed on a mobile the right hand column moves underneath the left hand one – the first page needs two columns of equal width and height on it, the second needs two columns where the left hand column is about 60% of the width, right hand column 40%, and both columns are equal in height?

Any help much appreciated!

Report · Jan 14, 2020

First page (code example):

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.page-wrapper > * {
background-color: #f2f2f2;
width: 48%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html>

Second page (code example): Nothing much changed, apart from a couple of css styles:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.main-content  {
background-color: #f2f2f2;
width: 59%;
}
.sidebar-content  {
background-color: #f2f2f2;
width: 39%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html>

Report · Jan 14, 2020

Great stuff! Thanks very much!

Responsive flexbox columns - equal/unequal width/height

1 Correct answer