如何让 Flexbox 允许输入为 100% 宽度？答案

【问题标题】：How to get Flexbox to allow an input to be 100% width?如何让 Flexbox 允许输入为 100% 宽度？
【发布时间】：2017-12-31 17:38:24
【问题描述】：

我有以下由 bootstrap 4 提供支持的 flexbox 表单。

https://jsfiddle.net/kkt0k2bs/1/

我有一个媒体查询来调整表单元素的大小以缩小显示。

在较大的显示器上，我希望表单项是内联的，但在较小的屏幕上，我希望表单元素以 100% 堆叠。

在较小的显示器上输入不是 100% 宽度...如何使代码在较小的显示器上使宽度达到 100%？

HTML：

<div class="form-mod">
        <form class="form-inline justify-content-center d-inline-flex">
            <div class="form-group">
                <div>
                    <input type="text" name="email" value="" placeholder="Enter your email..." class="form-control">
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Request an Invite</button>
            </div>
        </form>
</div>

CSS：

.form-mod {
  display: inline-block;
  text-align: center;
  padding: 16px 32px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3;
  box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);

  [type="text"] {
    width: 260px;
    margin-right: 16px;
    border-radius: 100px;
    padding-left: 18px;
    border-radius: $border-radius;
    font-size: 16px;
  }

  @include media-breakpoint-down(sm) {
    .form-group {
      width: 100%;
    }
    [type="text"] {
      width: 100%;
      margin: 0 0 16px 0;
      display: block;
    }
    opacity: .5;
  }
}

【问题讨论】：

你有几个冗余的 div 只会让样式更难......
我同意.. 鉴于 React 的工作方式，不确定如何避免这种情况

标签： twitter-bootstrap css flexbox twitter-bootstrap-4

【解决方案1】：

将此添加到您的代码中：

.form-group {
  flex: 1 0 auto;
}

revised demo

这告诉弹性项目在同一行时共享空间。

但是当它们分成不同的行时，每行都会占用所有可用空间。

【讨论】：

这不起作用 - 按钮在中断时仍未占用全宽。
在此处发布演示或新问题。 @OldGreg
参考您的演示 - 它不会将按钮拉伸到 100% 中断到移动设备。 screencast.com/t/DIlhHYKrbF
代码陈旧且损坏。不知道随着时间的推移发生了什么。在这里，试试这个：jsfiddle.net/y5vprmet@OldGreg
这行得通@michael-benjamin。谢谢！你能更新答案还是不再让你？

【解决方案2】：

我认为您的.form-mod { display: inline-block; } 可能有问题。您可以为较小的屏幕编写一个媒体查询，将其更改为block。

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { 
  .form-mod {
    display: block;
  }
}

【讨论】：