為什么不應用flex-basis大小？

Question

我有一個輸入元素，我想使用flex收縮來增大和縮小，但是未應用其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小得多。

這是擺弄這個例子的東西。

Answer 1

您已將display: flex應用於<input>元素，而不是div。

理想的方法是使用容器/包裝器，然后display: flex容器display: flex然后使用flex-basis控制輸入​​- 這是您的Fiddle更新

的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

您需要建立一個彈性格式上下文 。

這與建立塊格式化上下文相同，除了使用Flex布局而不是塊布局。

為了使flex-basis ， flex-grow ， flex-shrink等屬性正常工作，元素必須參與flex格式化上下文。

彈性項目為其內容建立新的格式設置上下文。 格式化上下文的類型通常由其顯示值確定。 但是，彈性項目本身是彈性級別的框，而不是塊級的框： 它們參與其容器的flex格式上下文 ，而不是塊格式上下文。

 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> 

---

修訂版jsFiddle

---

來源： W3C CSS靈活盒布局模塊級別1

Answer 3

 /* 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 4

將flex屬性應用於輸入容器，而不是輸入。

看看下面的代碼片段：

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

希望這可以幫助！