列内の未知の要素の高さをどのようにすることができますか？

Question

私は偶数列を作成するのにflexを使用しており、同じ高さにするにはvhを使用しています。それはうまくいきますが、列の中にx個のアイテムを入れることができます。各列の要素が、どれくらいの数の項目が存在するか（cssを使用しているかどうかに応じて）の高さにしたいと思います。

1 = 100％ 2 = 50％ 3 = 33.33パーセント など

私はJSを介してこれを行うことができます知っているが、私はフレックス、グリッド、または何かを経由してCSSを介してこれを自動化したいのですがエレーゼ。

Answer 1

問題を再現しようとしました。 .itemでflex: 1を使用して、それぞれのアイテムが（問題のステートメントに従って）等しくなるようにします。

は、以下のスニペットを見てください：

body { 
 
    margin: 0; 
 
} 
 

 
.parent { 
 
    width: 80%; 
 
    padding: 20px; 
 
    display: flex; 
 
    border: 1px solid red; 
 
} 
 

 
.child { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    justify-content: flex-end; 
 
    padding: 20px; 
 
    border: 1px solid blue; 
 
    height: 60vh; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    background: lightGreen; 
 
    border: 1px solid green; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="item">33.33%</div> 
 
    <div class="item">33.33%</div> 
 
    <div class="item">33.33%</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="item">50%</div> 
 
    <div class="item">50%</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="item">100%</div> 
 
    </div> 
 
</div>

希望、これはあなたが達成しようとしているものです。

Answer 2

これは、あなたがそれをフレキシボックスで動作させるために必要なすべてのです：

.flex-container { 
 
    display: flex; 
 
} 
 

 
.flex-item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    border: 1px solid; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
    <div class="item">1/1</div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="item">1/2</div> 
 
    <div class="item">1/2</div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="item">1/3</div> 
 
    <div class="item">1/3</div> 
 
    <div class="item">1/3</div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="item">1/4</div> 
 
    <div class="item">1/4</div> 
 
    <div class="item">1/4</div> 
 
    <div class="item">1/4</div> 
 
    </div> 
 
</div>