Break flexbox, wenn ein neuer Container eingeführt wird

Ich frage mich, wie ich die flex Reihe brechen und eine neue starten kann. Ich hatte gehofft, dass die display:flex es brechen würde, aber es tut es nicht.Break flexbox, wenn ein neuer Container eingeführt wird

.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>

Quelle

2016-06-14 Randy

zu bedenken, dass die 'flex-grow' Eigenschaft nicht notwendigerweise die gleiche Breite. - http://stackoverflow.com/questions/34733955/width-vs-flex-grow-in-flexbox –

_offftopic_, nur aus Neugier: Warum verwenden Sie 'flex: 6'? – blonfu

@blonfu Ich versuche mein eigenes Grid System zu bauen. Dafür hätte 'flex: 1' funktioniert, aber Elemente haben Flex-Breite basierend auf der Klasse. – Randy

Sie können flex-wrap: wrap; und width: 100%; auf Ihre .dflex Klasse hinzuzufügen.

.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>

Quelle

2016-06-14 15:31:29

Break flexbox, wenn ein neuer Container eingeführt wird

Antwort

Verwandte Themen