CSSフレックス：行内の行

Question

flexを使用して行内の行のスタイリングに問題があります。 flex以来

.row, [class*='col-'] { 
 
\t display: flex; 
 
\t flex-direction: row; 
 
} 
 
.col-6 { 
 
\t flex-basis: 50%; 
 
\t max-width: 50%; \t 
 
}

<div class="row"> 
 

 
\t <div class="col-6" style="background-color:red;"> 
 
\t \t 
 
\t \t <div class="row"> 
 
\t \t \t 
 
\t \t \t <div class="col-6" style="background-color:green;"> 
 
\t \t \t \t should be 25% 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-6" style="background-color:blue;"> 
 
\t \t \t \t another 25% 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div class="col-6" style="background-color:gray;"> 
 
\t \t Right half 
 
\t </div> 
 

 
</div> <!-- /.row --> 
 

 
<p>The red background should not be seen, since the green and blue should each take up 50% of the red's space...</p>

Answer 1

（根拠に基づく）のスペースを埋めるだろう、あなたは別のrowを必要としません。実際、フレックス・ボックス・レイアウトでは行を頻繁に必要としません。ネストされた行を取り出した場合

が、これはあなたが何をしているようだ後：

.row, [class*='col-'] { 
 
\t display: flex; 
 
\t flex-direction: row; 
 
} 
 
.col-6 { 
 
\t flex-basis: 50%; 
 
\t max-width: 50%; \t 
 
}

<div class="row"> 
 

 
\t <div class="col-6" style="background-color:red;"> 
 
\t \t \t \t \t 
 
\t \t \t <div class="col-6" style="background-color:green;"> 
 
\t \t \t \t should be 25% 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-6" style="background-color:blue;"> 
 
\t \t \t \t another 25% 
 
\t \t \t </div> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div class="col-6" style="background-color:gray;"> 
 
\t \t Right half 
 
\t </div> 
 

 
</div> <!-- /.row --> 
 

 
<p>The red background should not be seen, since the green and blue should each take up 50% of the red's space...</p>