フレックスは説明どおりに機能しません

Question

フレックス成長は、その兄弟関係に関連する部分に基づいて子供のサイズを決定します。 2つ。フレックスの正確な情報を私に指示したり、説明したりすることができます。あなたはflex-grow:1; .D1 に追加する必要があり

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

。 flex-growは、残りのスペースをフレックスアイテム間でどのように分割し、各アイテムがどれだけ受け取るかを決定するためです。

もし、あなたがflex-growを設定していないアイテムがあれば、そのスペースは得られませんし、あなたが期待したようにelemntsの幅を得ることもできません。

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