我如何写这个CSS Flexbox布局？

Question

如何编写此Flex Flexbox布局？

Answer 1

通过使用嵌套网格钉住它。

Screenshot - Click image to view full size.]

标记和CSS这里：

 <div class="flex flex-twin"> 
      <div class="box double">first box</div><!-- end box --> 
      <div class="box"> 
       <div class="flex flex-twin"> 
        <div class="box">second</div><!-- end box --> 
        <div class="box">third</div><!-- end box --> 
       </div><!-- end flex-twin --> 
       <div class="flex flex-twin"> 
        <div class="box">fourth</div><!-- end sub box --> 
        <div class="box">fifth</div><!-- end sub box --> 
       </div><!-- end flex-twin --> 
      </div><!-- end box --> 
     </div><!-- end flex-twin --> 

     <style> 
      .flex { 
       display: flex; 
       justify-content: space-between; 
       &.flex-twin { 
        .box { 
         width: 50%; 
         height: 200px; 
         background: #ccc; 
         &.double { 
          height: 400px; 
         } 
         .flex { 
          &.flex-twin { 
           .box { 
            background: #aaa; 
           } // end box 
          } // end flex-twin 
          .box { 

          } // end box 
         } // end flex 
        } // end box 
       } // end flex-twin 
       .box { 

       } // end box 
      } // end flex 
     </style>