Registerkarte Verwenden von Pure CSS Flex-Konzept

Question

Wie kann ich ein flexibles Element von seinem flexiblen Container trennen und die Breite 100% mit CSS ohne Positionierung festlegen?

Meine HTML-Struktur:

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

Expected result

Answer 1

Die Regel, die Sie hinzufügen müssen, ist flex-wrap: wrap;. Sobald wir das zu der .container hinzufügen, zwingt .block-container 100% Breite es zu einer neuen Zeile, weg von der .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>