Flex wachsen nicht funktioniert wie beschrieben

Question

Ich bin ein bisschen verwirrt von meinem Verständnis flex grow bestimmt die Größe eines Kindes basierend auf einem Teil in Bezug auf seine Geschwister, ich ein Element gesetzt, flex-wachsen zwei, aber es ist deutlich mehr dann zwei. Könnte mich jemand dazu bringen, genaue Informationen über Flex zu erstellen oder zu erklären, danke.

https://jsfiddle.net/onnakjen/75/

.parent{ 
     display: flex; 
     border: 1px solid rgba(0,0,0,.5); 
     height: 300px; 
     width: 300px; 
     flex-flow: row wrap; 
     justify-content: center; 
     align-items: center; 
     //align-content: center; 
    } 
    .parent div{ 
     width: 50px; 
     height: 50px; 
     background-color: blue; 
     margin:1px; 
     color: white; 
     text-align: center; 
     line-height: 50px; 
    } 

    .d2{ 
     flex-grow: 3; 
     } 

Answer 1

Sie müssen flex-grow:1; zu .d1 hinzuzufügen. Weil flex-grow bestimmt, wie der verbleibende Speicherplatz zwischen Flex-Elementen und wie viel jedes Element erhält.

Also, wenn Sie für einige Einzelteile Flex wachsen gesetzt tun sie nicht, erhalten sie gewohnt, dass der Raum, und man wird nicht elemnts' Breiten erhalten, wie Sie es erwarten.

.d1{ 
    flex-grow: 1; 
} 

.parent { 
 
    display: flex; 
 
    border: 1px solid rgba(0, 0, 0, .5); 
 
    height: 300px; 
 
    width: 300px; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 

 
} 
 

 
.parent div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    margin: 1px; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 50px; 
 
} 
 

 
.d1 { 
 
    flex-grow: 1; 
 
} 
 

 
.d2 { 
 
    flex-grow: 3; 
 
}

<div class="parent"> 
 
    <div class="d1">1</div> 
 
    <div class="d2">2</div> 
 

 
</div>