Warum wird die Flex-Basisgröße nicht angewendet?

Question

Ich habe ein Eingabeelement, das ich mit Flex-Shrink wachsen und schrumpfen möchte, aber seine Flex-Basis-Größe wird nicht angewendet.

Hier ist mein html:

<input type="text"/> 

und meine css:

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

warum ist die Basis Größe nicht angewendet werden? es wird auf eine viel kleinere Breite als 450 px eingestellt.

Here ist eine Geige mit dem Beispiel.

Answer 1

Sie display: flex zum <input> Element angelegt haben anstelle eines div.

Der ideale Weg ist, einen Container/Wrapper zu verwenden und dann den Behälter machen display: flex & dann die Eingabe steuern mit 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"/>

Kontrolle dieses

Answer 3

Sie müssen einen flex Formatierungskontext einrichten.

Dies ist das Gleiche wie das Erstellen eines Blockformatierungskontextes, mit Ausnahme von , bei dem das Flex-Layout anstelle des Blocklayouts verwendet wird.

Für Eigenschaften wie flex-basis, flex-grow, flex-shrink zu arbeiten, muss ein Element in dem Flex-Formatierungskontext teilnehmen.

Ein Flex-Element richtet einen neuen Formatierungskontext für seinen Inhalt ein. Der Typ dieses Formatierungskontextes wird durch seinen Anzeigewert bestimmt, wie üblich. Allerdings sind Flex-Elemente selbst Flex-Level-Boxen, nicht Block-Level-Boxen: sie nehmen an ihrem Flex Formatierungskontext, nicht in einem Block Formatierungskontext.

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

---

Quelle: W3C CSS Flexible Box Layout Module Level 1

Answer 4

Wenden Sie flexible Eigenschaften auf einen Eingabebehälter und nicht auf die Eingabe an.

Werfen Sie einen Blick auf das Snippet unten:

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

hoffe, das hilft!