フレックスボックスヘッダーと他の行の一致内容

Question

フレックスボックスを把握し始めたばかりです。フレックスボックス内のヘッダー行を次のX個の行の自動幅に合わせる方法はありますか？行のすべての要素をグループ化して列を使用できないようにする必要があります。

おそらく列が内部にある列ですか？

テーブル列要素と似ていますが、フレックスボックスを探しています。

https://jsfiddle.net/benneb10/yjdabpzm/

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 10px; 
 
    text-transform: uppercase; 
 
    font-family: helvetica; 
 
    text-align: left; 
 
} 
 
.flexRowHeader { 
 
    font-weight: bold; 
 
} 
 
.flexBox { 
 
    background: lightblue; 
 
    width: 100%; 
 
} 
 
.flexBox .flexRow:nth-child(2n) { 
 
    background: #fff; 
 
} 
 
.flexRow { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    height: 50px; 
 
    align-items: center; 
 
} 
 
.multiLineFlexGroup { 
 
    width: 50%; 
 
    align-self: flex-start; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    transition: all 2s ease; 
 
} 
 
.multiLineFlexGroup .flexRow { 
 
    align-items: center; 
 
} 
 
.flexItem { 
 
    flex: auto; 
 
    max-width: 200px; 
 
} 
 
button.icon { 
 
    height: 16px; 
 
    width: 16px; 
 
    background-size: contain; 
 
}

<div class="flexBox"> 
 
    <div class="flexRow flexRowHeader"> 
 
    <span class="flexItem">Heading A</span> 
 
    <span class="flexItem">Heading B</span> 
 
    <span class="flexItem">Heading C</span> 
 
    <span class="flexItem">Heading D</span> 
 
    <span class="flexItem">Heading E</span> 
 
    <span class="flexItem">Heading F</span> 
 
    <span class="flexItem">Heading G</span> 
 
    <span class="flexItem">Heading H</span> 
 
    </div> 
 
    <div class="flexRow"> 
 
    <div class="flexItem">Test</div> 
 
    <span class="flexItem">SMALL ITEM</span> 
 
    <span class="flexItem">ANOTHER ITEM</span> 
 
    <span class="flexItem">VERY VERY VERY LARGE ITEM</span> 
 
    <div class="multiLineFlexGroup"> 
 
     <div class="flexRow"> 
 
     <span class="flexItem">ITEM</span> 
 
     <span class="flexItem">ITEM</span> 
 
     <span class="flexItem">ITEM</span> 
 
     <span class="flexItem">ITEM</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたがお互いにやり取りするために、異なるフレックスボックスをしたいようです。唯一の方法は、ヘッダー要素のサイズを取得し、javascript経由で他の人に適用することです（これを行わないでください）。 フレックスボックスはグリッドシステムではなく、テーブルでもありません。テーブルが必要な場合は、cssとhtmlで提供されるテーブルを使用してください。