CSS Flexbox 2つの動的列と3つの項目を持つレイアウト

Question

私がしたいのは、2つの列があります。 左側に1つのメイン列と右側に2つの項目があります。 問題は、3つのアイテムすべての高さ、したがってコンテナ全体が大きく変動し、レイアウトがラップできないことです。

1つのdivをモバイル上で（注文によって）上に移動する必要があるため、適切なアイテムを1つの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

これはフレキシボックスに代わるものです。

これはあなたに役立ちます。

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