CSS Flexbox布局，带有两个动态列和三个项目

Question

What I want to do is have two colums: One main column on the left and one column on the right with 2 items in it. The problem is, that the heights of all three items and therefore the entire container vary wildly, which prohibits the layout from wrapping.

I cannot put the right items into one div, because I need to move one of them to the top on mobile (via order).

Basically, I want to achieve the result below, without having to set the container to a fixed height.

 .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

This is an alternative to the flexbox.

Hope this help you.

 $(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>