列数または列の内容に関係なく、同じ幅のフレックスボックス行

Question

フレックスボックスを使用して可変数の列を含む3行を作成しようとしています（上部と下部の行がQTYで一致します）単一の列。

列数は可変なので、親には幅が設定されていません。

真ん中の列の幅を上下の行の幅に合わせるのには苦労しています。

section { 
 
    margin: 0 auto; 
 
    display: flex; 
 
} 
 

 
.col { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-color: #000; 
 
    border-style: solid; 
 
    border-width: 1px 0px 1px 1px; 
 
} 
 

 
.col:last-child { 
 
    border-right: 1px solid #000; 
 
} 
 

 
.middle { 
 
    height: 100px; 
 
    width: inherit; 
 
    border-color: #000; 
 
    border-style: solid; 
 
    border-width: 0px 1px 0px 1px; 
 
}

<section> 
 
    <div class="col">1</div> 
 
    <div class="col">2</div> 
 
    <div class="col">3</div> 
 
    <div class="col">4</div> 
 
    <div class="col">5</div> 
 
</section> 
 
<section> 
 
    <div class="middle">Middle</div> 
 
</section> 
 
<section> 
 
    <div class="col">1</div> 
 
    <div class="col">2</div> 
 
    <div class="col">3</div> 
 
    <div class="col">4</div> 
 
    <div class="col">5</div> 
 
</section>

https://jsfiddle.net/o5xLuq51/

Answer 1

この場合body要素であることを起こる、これらの要素の全体的な容器、カラム方向とインラインレベルフレックスコンテナを作ります。

これにより、最長行で設定された幅の列が作成されます。

フレックスアイテムの初期設定はalign-self: stretchなので、定義された幅を持たないすべての行がコンテナの全幅を拡大します（more details）。

次に、.middleを親の全幅に拡大するには、flex-grow: 1を使用します。

/* NEW */ 
 
body { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    /* border: 1px dashed red; */ /* uncomment to see container borders */ 
 
} 
 

 
section { 
 
    /* margin: 0 auto; */ 
 
    display: flex; 
 
} 
 
.col { 
 
    width: 100px; 
 
    height:100px; 
 
    border-color: #000; 
 
    border-style: solid; 
 
    border-width: 1px 0px 1px 1px; 
 
} 
 
.col:last-child { 
 
    border-right: 1px solid #000; 
 
} 
 
.middle { 
 
    flex-grow: 1; /* NEW */ 
 
    height: 100px; 
 
    /* width: inherit; */ 
 
    border-color: #000; 
 
    border-style: solid; 
 
    border-width: 0px 1px 0px 1px; 
 
}

<section> 
 
    <div class="col">1</div> 
 
    <div class="col">2</div> 
 
    <div class="col">3</div> 
 
    <div class="col">4</div> 
 
    <div class="col">5</div> 
 
</section> 
 
<section> 
 
    <div class="middle">Middle</div> 
 
</section> 
 
<section> 
 
    <div class="col">1</div> 
 
    <div class="col">2</div> 
 
    <div class="col">3</div> 
 
    <div class="col">4</div> 
 
    <div class="col">5</div> 
 
</section>