首页 文章

flex输入为什么不尊重？

提问于
浏览 次
1

我注意到'input'元素没有拉伸或缩小以填充flex容器 . 有谁知道为什么以及是否有解决方案？

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

note 我知道这个链接：

input / button elements not respecting flex-grow

但是使用min-width：0; box-sizing：border-box;对我没有影响 .

css flexbox html-input

1 回答

  • 3

    因为您指定了 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>
    回复于

相关问题