输入为啥不尊重flex？

Posted 2023-03-28

【中文标题】输入为啥不尊重flex？

【英文标题】：flex not respected by Input why?输入为什么不尊重flex？

【发布时间】：2017-08-04 02:26:18

【问题描述】：

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

我下面的示例显示了在 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>

注意我知道这个链接：

input / button elements not respecting flex-grow

但是使用 min-width: 0; box-sizing：边框框；对我没有影响。

【参考方案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>