输入为什么不尊重 flex？

Question

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

我下面的示例显示容器 class c 被用于 Div 元素（正确拉伸）。以及单个classe，用于右对齐的定长端。 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>

注意我知道这个link:

但是使用最小宽度：0；框大小：边框框；对我没有影响。

Answer 1

因为您指定的 div.d 而不是 input.d 或 div .d 或只是 .d。另外，不需要关闭 input 标签。

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

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

输入为什么不尊重 flex？

flex not respected by Input why?

css

flexbox

html-input