フレックス単位のサイズが適用されないのはなぜですか？

Question

flex要素を使って拡大縮小するinput要素がありますが、そのflex-basisサイズは適用されていません。ここで

は私のhtmlです：

<input type="text"/> 

と私のCSS：

input{ 
    background-color: black; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: row; 
    flex-wrap: wrap; 
    flex: 0 1 450px; 
} 

はなぜ根拠サイズが適用されていませんか？それは450pxよりはるかに小さい幅に設定されています。

Hereは、この例ではフィドルです。

Answer 1

あなたは代わりのdivの<input>要素にdisplay: flexを適用しています。

理想的な方法は、display: flex &その後、使用して入力を制御するコンテナを行い、コンテナ/ラッパーを使用することですflex-basisからHere is your Fiddle updated

HTML

<div class="container"> 
    <input type="text"/> 
</div> 

CSS

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

.container input { flex: 0 1 450px; } 

Answer 2

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
    display:flex; 
 
} 
 

 
input{ 
 
    background-color: black; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    flex: 0 1 450px; 
 
}

<input type="text"/>

チェックこの

Answer 3

フレックスフォーマットコンテキストを確立する必要があります。

を除き、ブロックレイアウトの代わりにフレックスレイアウトが使用されていることを除けば、ブロックフォーマッティングコンテキストを確立するのと同じです。仕事をするflex-basis、flex-grow、flex-shrinkのような性質のために

、要素は、フレックスフォーマット文脈に参加しなければなりません。

フレックスアイテムは、そのコンテンツの新しい書式設定コンテキストを確立します。この書式設定コンテキストの タイプは、その表示値によって通常は として決定されます。ただし、フレックスアイテム自体はフレックスレベルのボックスであり、 ブロックレベルのボックスではありません。ブロックの書式設定コンテキストではなく、コンテナのフレックス の書式設定コンテキストに参加します。

var el = document.querySelector("input"); 
 
console.log("input width: " + el.offsetWidth + "px");

.flex-container { /* Flex formatting context, this makes the element a flex container */ 
 
    display: flex; 
 
} 
 
input { /* Direct children of flex containers are now flex items */ 
 
    background-color: black; 
 
    flex: 0 1 450px; 
 
    box-sizing: border-box; 
 
}

<section class="flex-container"> 
 
    <input type="text" /> 
 
</section>

---

Revised jsFiddle

---

出典：W3C CSS Flexible Box Layout Module Level 1

Answer 4

フレックスプロパティを入力ではなく入力コンテナに適用します。

.input-holder { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.input-holder input { 
 
    flex: 0 1 450px; 
 
    background: #000; 
 
}

<div class="input-holder"> 
 
    <input type="text"/> 
 
</div>

・ホープ、このことができます：

は、以下のスニペットを見てください！