html - 具有两个动态列和三个元素的 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>