CSS Flexbox布局，帶有兩個動態列和三個項目

Question

我要做的是有兩個列：左邊一列，右邊一列，其中有2項。 問題在於，所有三個項目的高度以及整個容器的高度都發生了巨大的變化，這阻礙了布局的包裝。

我無法將正確的項目放到一個div中，因為我需要將其中一項移動到移動設備的頂部（通過訂單）。

基本上，我想實現以下結果，而不必將容器設置為固定高度。

 .flex { display: flex; flex-wrap: wrap; flex-direction: column; height: 800px; } .child--main { height: 800px; width: calc(200% / 3); color: #fff; text-align: center; text-transform: uppercase; background-color: #6b6bef; line-height: 800px; flex-basis: 100%; } .child--video { height: 300px; width: calc(100% / 3); background-color: #f1b36a; color: white; text-align: center; line-height: 300px; text-transform: uppercase; } .child--sidebar { height: 400px; width: calc(100% / 3); text-align: center; line-height: 400px; color: #fff; background-color: #81ca3a; text-transform: uppercase; } 

 <div class="flex"> <div class="child child--main">main</div> <div class="child child--video">video</div> <div class="child child--sidebar">sidebar</div> </div> 

Answer 1

這是flexbox的替代方法。

希望這對您有所幫助。

 $(document).ready(function() { setInterval(function(){ if (parseInt($('.child--main').css('height'), 10) == 1000) { $('.child--main').animate({'height': '100px'}, 1000); } else { $('.child--main').animate({'height': '1000px'}, 1000); } }, 2000); }); 

 .flex { /*display: flex; flex-wrap: wrap; flex-direction: column; height: 800px;*/ } .child--main { float:left; height: 800px; width: calc(200% / 3); color: #fff; text-align: center; text-transform: uppercase; background-color: #6b6bef; line-height: 800px; flex-basis: 100%; } .child--video { float:right; height: 300px; width: calc(100% / 3); background-color: #f1b36a; color: white; text-align: center; line-height: 300px; text-transform: uppercase; } .child--sidebar { float:right; clear:right; /* this for a small height body */ height: 400px; width: calc(100% / 3); text-align: center; line-height: 400px; color: #fff; background-color: #81ca3a; text-transform: uppercase; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flex"> <div class="child child--main">main</div> <div class="child child--video">video</div> <div class="child child--sidebar">sidebar</div> </div>