タブ純粋なCSSフレックスコンセプトを使用する

Question

フレックスアイテムをフレックスコンテナから分離し、配置なしでCSSを使用して幅を100％にブロックするにはどうすればよいですか？

私のHTML構造：

<div class="container"> 
    <div style="display:flex;"> 
    <div>tab</div> 
    <div class="block-container">content</div> 
    </div> 
</div> 

Expected result

Answer 1

あなたが追加する必要があるルールがflex-wrap: wrap;です。これを.containerに追加すると、.block-containerを100％幅にすると、.tabから離れて新しい行に強制的に移動します。

.container { 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.tab, .block-container { 
 
    padding: 1em; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
} 
 

 
.tab { 
 
    border-bottom: 1px solid white; 
 
    position: relative; 
 
    top: 1px; 
 
} 
 

 
.block-container { 
 
    flex: 0 0 100%; 
 
}

<div class="container"> 
 
    <div class="tab">tab</div> 
 
    <div class="block-container">content</div> 
 
</div>