printpreview_pps9_ref.html (1464B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "9-pages-per-sheet" scenario. The width 3 and height of each "swatch" is 1/3 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: 40px 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 /* Note: it's OK that the flex-basis isn't exactly 1/3 here. 16 Flexbox layout will give each flex item 33% of the width, 17 and then divide up the remaining amount equally. This 18 results in exactly 3 items fitting per row and each one 19 getting 1/3 of a row, which is all we're going for. */ 20 flex: 1 33%; 21 } 22 .swatch:nth-child(1) { border-color: cyan; } 23 .swatch:nth-child(2) { border-color: yellow; } 24 .swatch:nth-child(3) { border-color: pink; } 25 .swatch:nth-child(4) { border-color: orange; } 26 .swatch:nth-child(5) { border-color: purple; } 27 .swatch:nth-child(6) { border-color: olive; } 28 .swatch:nth-child(7) { border-color: blue; } 29 .swatch:nth-child(8) { border-color: tan; } 30 .swatch:nth-child(9) { border-color: fuchsia; } 31 </style> 32 <div class="swatch"></div> 33 <div class="swatch"></div> 34 <div class="swatch"></div> 35 <div class="swatch"></div> 36 <div class="swatch"></div> 37 <div class="swatch"></div> 38 <div class="swatch"></div> 39 <div class="swatch"></div> 40 <div class="swatch"></div>