flex为什么不尊重?

时间:2017-03-13 22:09:45

标签: css flexbox html-input

我注意到了这个输入'元素不会拉伸或收缩以填充弹性容器。有谁知道为什么以及是否有解决方案?

下面的示例显示了在Div元素上使用的容器类 c (正确拉伸)。还有一个类 e ,用于右对齐的固定长度端。 div行按预期拉伸和缩小,输入行不会。



div.c {
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

div.d {
  flex: 1;
}

div.e {
  display: inline-block;
  flex: 0 0 30px;
  background-color: red;
}

<div class='c'>
  <div class='d'>A</div>
  <div class='d'>B</div>
  <div class='d'>C</div>
  <div class='d'>D</div>
  <div class='e'>E</div>
</div>

<div class='c'>
  <input class='d'></input>
  <input class='d'></input>
  <input class='d'></input>
  <input class='d'></input>
  <div class='e'></div>
</div>
&#13;
&#13;
&#13;

注意我知道这个链接:

input / button elements not respecting flex-grow

然而使用min-width:0; box-sizing:border-box;对我没有任何影响。

1 个答案:

答案 0 :(得分:3)

因为您指定了div.d而不是input.ddiv .d或仅.d。此外,无需关闭input代码。

&#13;
&#13;
div.c {
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

.d {
  flex: 1;
}

div.e {
  display: inline-block;
  flex: 0 0 30px;
  background-color: red;
}
&#13;
<div class='c'>
  <div class='d'>A</div>
  <div class='d'>B</div>
  <div class='d'>C</div>
  <div class='d'>D</div>
  <div class='e'>E</div>
</div>

<div class='c'>
  <input class='d'>
  <input class='d'>
  <input class='d'>
  <input class='d'>
  <div class='e'></div>
</div>
&#13;
&#13;
&#13;