1054010-1.html (3510B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .flexRow { 6 display: flex; 7 flex-direction: row; 8 flex-wrap: wrap; 9 justify-content: center; 10 } 11 12 .flexColumn { 13 display: flex; 14 flex-direction: column; 15 justify-content: center; 16 flex-basis: 100%; 17 } 18 19 .flexBlock { 20 flex: 0; 21 display: flex; 22 flex-direction: column; 23 padding: 5px; 24 border: 1px solid blue; 25 } 26 27 .flexColumn > .flexBlock:last-child { 28 flex: 1; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="flexRow"> 34 <div class="flexColumn"> 35 <div class="flexBlock"> 36 Nested layout 1 37 <div class="flexRow"> 38 <div class="flexColumn"> 39 <div class="flexBlock"> 40 Nested layout 2 41 <div class="flexRow"> 42 <div class="flexColumn"> 43 <div class="flexBlock"> 44 Nested layout 3 45 <div class="flexRow"> 46 <div class="flexColumn"> 47 <div class="flexBlock"> 48 Nested layout 4 49 <div class="flexRow"> 50 <div class="flexColumn"> 51 <div class="flexBlock"> 52 Nested layout 5 53 <div class="flexRow"> 54 <div class="flexColumn"> 55 <div class="flexBlock"> 56 Nested layout 6 57 <div class="flexRow"> 58 <div class="flexColumn"> 59 <div class="flexBlock"> 60 Nested layout 7 61 <div class="flexRow"> 62 <div class="flexColumn"> 63 <div class="flexBlock"> 64 Nested layout 8 65 <div class="flexRow"> 66 <div class="flexColumn"> 67 <div class="flexBlock"> 68 Nested layout 9 69 </div> 70 </div> 71 </div> 72 </div> 73 </div> 74 </div> 75 </div> 76 </div> 77 </div> 78 </div> 79 </div> 80 </div> 81 </div> 82 </div> 83 </div> 84 </div> 85 </div> 86 </div> 87 </div> 88 </div> 89 </div> 90 </div> 91 </div> 92 </div> 93 </div> 94 </div> 95 </div> 96 </body> 97 </html>