私は私は2つのflexboxesを配置するフレキシボックスを持っているフレキシボックス

Question

内のフレキシボックスのサイズ設定。

.Summary_Row{ 
    display: -webkit-flex; 
    display: flex; 
    -webkit-align-items: stretch; 
    align-items: stretch; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-flex-flow: row; 
    flex-flow: row; 
    width: 100%; 
    margin-top: 10px; 
    border-bottom: 2px solid #d3d3d3; 
    } 

.col_left{ order:1; width: 33%; display:flex; justify-content: center; text-align: center;} 
.col_center{order:2; width: 33%; display:flex; justify-content: center; border-right: 2px solid #d3d3d3; border-left: 2px solid #d3d3d3; text-align: center;} 
.col_right{ order:3; width: 33%; display:flex; justify-content: center; text-align: center;} 


    .int_row{ 
    display: -webkit-flex; 
    display: flex; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-flex-flow: row; 
    flex-flow: row; 
    width: 100%; 
    } 


#inside_left{order:1; display:flex; justify-content: center; align-items: center; width: 25%;} 
#inside_right{order:2; display:flex; flex-flow: column; justify-content: center; width: 75%; text-align:left;} 

、私は三等分の列に分割されフレキシボックス（summary_row）を持っています。 col_rightについては、さらに2つのボックスに並べて並べます（1つは25％、もう1つはcol_rightです）。私はinside_leftとinside_rightを含めるべきだと思ったint_rowを持っていますが、それが余分なものかどうかはわかりません。 int_rowを100％に設定していても、幅は実際にはcol_rightの全幅にも及ばない。

上記画像における青int_rowあり、緑色はinside_rightあります。青色は幅の100％に近くないことに注意してください。私は基本的にイメージと緑が重なり合うのを望んでいません。私は、幅がさらに伸びるならば、重なりは起こらないと思っています。

私はこれをどのように達成できるのか、これについて正しく考えているのですか？

Answer 1

私はCodePenでa working exampleをあなたのために作成しました。

HTML：

<div class="row"> 
    <div class="row__left">.row__left</div> 
    <div class="row__center">.row__center</div> 
    <div class="row__right"> 
    <div class="row__right-a">.row__right-a</div> 
    <div class="row__right-b">.row__right-b</div> 
    </div> 
</div> 

CSS：

.row { 
    display: flex; 
    border: 1px solid #000; 
    padding: .5em; 
} 

.row__left, 
.row__center, 
.row__right { 
    flex: 0 0 33.3333333%; 
    border:1px solid red; 
    padding: .5em; 
    box-sizing: border-box; 
} 

.row__right { 
    display: flex; 
} 

.row__right-a { 
    flex: 0 0 25%; 
    background-color: blue; 
} 
.row__right-b { 
    flex: 0 0 75%; 
    background-color: green; 
} 

あなたは余分な.int_row要素を必要としませんでした。フレックスアイテム（子）はフレックスコンテナでもある可能性があるためです。

フレックスボックスでグリッドを作成しようとするときには、幅の代わりにフレックスベースとフレックススケールを使用する必要があります。私は、省略形のflexプロパティを使用しました。フレックス短縮型プロパティを使用することは常に良い考えです。これは、フレックス拡大、縮小、および基底値を設定する必要があるからです。一部のブラウザ（IE）には適切なデフォルト値がないため、いくつかの問題を軽減できます。

また、thisは、Flexboxを使い始める前の記事です。