| license: mit |
Responsive Flexbox practice. Template could be used for a portfolio page.
OPEN IN A NEW WINDOW TO SEE LAYOUT ON SCREEN SIZE GREATER THAN 1024px. On smaller screens less than 1024px (eg iPhone, iPad), boxes collapse into vertical columns of equal height. Aspect ratio is mantained for the vertical boxes, which is different from their aspect ratio when viewed on larger screens.
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <meta charset='utf-8'> | |
| <meta name="viewport" content="width=device-width"> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .wrapper { | |
| width: 100vw; | |
| height: 300vh; | |
| display: flex; | |
| justify-content: center | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| width: 80%; | |
| } | |
| .box { | |
| box-sizing: border-box; | |
| border: 10px solid #fff; | |
| } | |
| .group-1 { | |
| width: 100%; | |
| height: 20%; | |
| } | |
| .box-1 { | |
| background-color: orangered; | |
| height: 100%; | |
| } | |
| .group-2 { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| height: 30%; | |
| } | |
| .group-2-nest-2 { | |
| display: flex; | |
| flex-direction: column; | |
| width: 30%; | |
| height: 100%; | |
| } | |
| .box-2 { | |
| background-color: tomato; | |
| width: 70%; | |
| height: 100%; | |
| } | |
| .box-3 { | |
| background-color: coral; | |
| flex-basis: 100%; | |
| height: 50%; | |
| } | |
| .box-4 { | |
| background-color: darkorange; | |
| flex-basis: 100%; | |
| height: 50%; | |
| } | |
| .group-3 { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| height: 25%; | |
| } | |
| .box-5 { | |
| background-color: gold; | |
| width: 40%; | |
| height: 100%; | |
| } | |
| .box-6 { | |
| background-color: teal; | |
| width: 60%; | |
| height: 100%; | |
| } | |
| .group-4 { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| width: 100%; | |
| height: 25%; | |
| } | |
| .box-7 { | |
| background-color: mediumaquamarine; | |
| flex-basis: 50%; | |
| height: 50%; | |
| } | |
| .box-8 { | |
| background-color: mediumturquoise; | |
| flex-basis: 50%; | |
| height: 50%; | |
| } | |
| .box-9 { | |
| background-color: mediumblue; | |
| flex-basis: 50%; | |
| height: 50%; | |
| } | |
| .box-10 { | |
| background-color: mediumorchid; | |
| flex-basis: 50%; | |
| height: 50%; | |
| } | |
| @media screen and (max-width: 1024px){ | |
| .wrapper { | |
| height: 600vw; | |
| } | |
| .container { | |
| width: 100vw; | |
| } | |
| .group-1, .group-2, .group-2-nest-2, .group-3, .group-4 { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .group-1 { | |
| flex: 1; | |
| } | |
| .group-2 { | |
| flex: 3; | |
| } | |
| .box-2 { | |
| flex: 1; | |
| } | |
| .group-2-nest-2 { | |
| flex: 2; | |
| } | |
| .group-3 { | |
| flex: 2; | |
| } | |
| .group-4 { | |
| flex: 4; | |
| flex-wrap: nowrap; | |
| } | |
| .box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10 { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='wrapper'> | |
| <div class='container'> | |
| <div class='group-1'> | |
| <div class='box box-1'></div> | |
| </div> | |
| <div class='group-2'> | |
| <div class='box box-2'></div> | |
| <div class='group-2-nest-2'> | |
| <div class='box box-3'></div> | |
| <div class='box box-4'></div> | |
| </div> | |
| </div> | |
| <div class='group-3'> | |
| <div class='box box-5'></div> | |
| <div class='box box-6'></div> | |
| </div> | |
| <div class='group-4'> | |
| <div class='box box-7'></div> | |
| <div class='box box-8'></div> | |
| <div class='box box-9'></div> | |
| <div class='box box-10'></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |