printpreview_pps4_ref.html (792B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "4-pages-per-sheet" scenario. The width 3 and height of each "swatch" is 1/2 the width and height of the page. --> 4 <style> 5 html, body { margin: 0; height: 100%; } 6 body { 7 display: flex; 8 flex-flow: row wrap; 9 } 10 .swatch { 11 box-sizing: border-box; 12 border: 60px solid; 13 /* The height will be automatically set to the flex container's row height, 14 via default 'align-self' behavior (which ends up as 'stretch') */ 15 flex: 1 50%; 16 } 17 .swatch:nth-child(1) { border-color: cyan; } 18 .swatch:nth-child(2) { border-color: yellow; } 19 .swatch:nth-child(3) { border-color: pink; } 20 .swatch:nth-child(4) { border-color: orange; } 21 </style> 22 <div class="swatch"></div> 23 <div class="swatch"></div> 24 <div class="swatch"></div> 25 <div class="swatch"></div>