Question

我有一个输入元素，我想使用flex shrink来增长和缩小，但是它的弹性基础大小没有被应用。

这是我的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

您已将display: flex应用于<input>元素而非div。

理想的方法是使用容器/包装，然后制作容器display: flex＆amp;然后使用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

您需要建立 flex格式上下文。

这与建立块格式化上下文相同，除了使用flex布局而不是块布局。

要使flex-basis，flex-grow，flex-shrink等属性生效，元素必须参与Flex格式设置上下文。

弹性项为其内容建立新的格式化上下文。该此格式化上下文的类型由其显示值确定，如通常。但是，flex项目本身就是弹性级别的盒子，而不是块级框：它们参与其容器的flex 格式化上下文，而不是块格式化上下文。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Revised jsFiddle

来源： W3C CSS Flexible Box Layout Module Level 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>

希望这有帮助！

为什么没有应用flex-basis大小？

4 个答案: