メイク祖先フレキシボックスのdivタグは、私はフレックスディスプレイを使用して入力要素を持っている

Question

セット幅とその子の幅を取ると私はそうのようにそのflex-basis幅を設定します。

.flex-row input { flex: 0 1 450px; } 

とflex-row divが内部に収容されていますflex-container divの

flex-rowは、入力に必要な幅だけを使いたいと思っています。

flex-containerdisplay: flexこれは100％の幅を占めます。

display: inline-flexと入力すると入力が圧縮され、450pxよりもはるかに小さくなります。

私は実際にはflex-containerの幅を気にしませんが、子供の幅をもうまく利用するのはいいですが、どうすればいいですかflex-rowは入力と同じ幅を持ちます十分な余裕があれば、450px）？

.flex-container { 
 
    display: flex; 
 
} 
 
.flex-row { 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.flex-row input { 
 
    flex: 0 1 450px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-row"> 
 
    <input type="text" name="query" class="searchbar" /> 
 
    </div> 
 
</div>

とhereフィドル例です。

Answer 1

flex-row入力と同じflexプロパティをflex-rowに追加します。

.flex-row{ 
    display: flex; 
    flex: 0 1 450px; 
    align-items: center; 
    justify-content: center; 
} 

あなたが行は次のようにフレックスコンテナにプロパティを整列を追加し、正当化するだけでなく中央に配置したい場合。

.flex-container{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}