2015-11-04 79 views
-5

如何編寫此Flex Flexbox佈局? CSS Flexbox layout我如何寫這個CSS Flexbox佈局?

+2

歡迎堆棧溢出。嘗試自己建造它。如果/當您遇到問題時,請在此處發佈您的代碼和問題描述,我們會盡力爲您提供幫助。堆棧溢出是一種問答服務,而不是「從頭開始」的代碼寫入服務。這裏有一些更多的指導方針:http://stackoverflow.com/help/mcve –

+0

沒有任何我知道的將處理左邊的框相同的行容器中的其他四個匹配的高度。可能嗎? –

+0

這對flexbox來說絕對有可能。研究嵌套的柔性盒。您還需要將右上角和左下角的柔性項目製作爲柔性容器。你需要'flex-wrap:wrap'。祝你好運。 –

回答

2

通過使用嵌套網格釘住它。

Screenshot - Click image to view full size.enter image description here]

標記和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>