複数のフレックスボックスの単一行

Question

複数のフレックスボックスを1つの行に作成することはできますか？各フレックスボックスには独自の子フレックス要素がありますか？

私の要求をより正確にするために、それぞれが最大幅50％と高さ100％の2つのフレックス要素を持つフレックスボックスだとしましょう。今では、この既存の要素に隣接する要素を追加するオプションがありますしたがって、新しいフレックス要素を追加すると、要素の総数は幅が25％、25％、50％の3つになり、すべての要素の高さは100％になりますが、必要であれば要素の幅が一定であるが高さが半分になるように要素を追加する、すなわち要素の高さは50％、50％および100％であり、すべての要素の幅は50％になるそれは可能ですか？

Answer 1

左と右のコンテナ要素にflex-direction: columnを使用するだけです。子要素にflex: 1を設定した場合、それぞれの高さは同じになります。

$('.parent').on('click', '.left > div, .right > div', function() { 
 
    $(this).parent().append('<div />') 
 
})

.parent { 
 
    display: flex; 
 
} 
 
.left, 
 
.right { 
 
    height: 200px; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    border: 1px solid black; 
 
} 
 
.left > div, 
 
.right > div { 
 
    flex: 1; 
 
    border: 1px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="left"> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 

 
    <div class="right"> 
 
    <div></div> 
 
    </div> 
 
</div>