新しいコンテナが導入された場合、フレックスボックスを解除する

Question

flex行を壊して新しいものを開始する方法が不思議です。私はdisplay:flexがそれを壊すことを望んでいましたが、そうではありません。

.dflex { 
 
    display:flex; 
 
} 
 

 
.flexitem { 
 
    flex:6; 
 
} 
 

 

 

 
/* irrelevant styles */ 
 

 
.dflex { 
 
    border:2px solid red; 
 
    margin:4px; 
 
} 
 

 
.flexitem { 
 
    border:2px solid black; 
 
    margin:4px; 
 
}

<div class="dflex"> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="dflex"> 
 
    <div class="flexitem"> 
 
     &nbsp; 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたの.dflexクラスにflex-wrap: wrap;とwidth: 100%;を追加することができます。

.dflex { 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    border:2px solid red; 
 
    margin:4px; 
 
} 
 

 
.flexitem { 
 
    border:2px solid black; 
 
    margin:4px; 
 
    flex: 6; 
 
}

<div class="dflex"> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="dflex"> 
 
    <div class="flexitem"> 
 
     &nbsp; 
 
    </div> 
 
    </div> 
 
</div>

`フレックスgrow`プロパティが等しい幅必ずしもないことを覚えておく価値