为什么不应用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> 

希望这可以帮助！