在弹性项目上使用固定宽度并相应地调整其他项目

Question

我正在尝试构建多个输入可以彼此相邻放置的输入组。 默认情况下，它们将占用相同的宽度，我在整个过程中使用 flexbox。

这是代码的样子：

 .input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; }.input-group >.input { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0; }.input { display: block; width: 100%; height: 20px; line-height: 20px; background-color: #ffffff; border: 1px solid #ddd; }.width-50 { width: 50px;important; }

 <div class="input-group"> <input class="input" type="text" placeholder="State"> <input class="input" type="text" placeholder="School"> </div> <br /> <div class="input-group"> <input class="input width-50" type="text" placeholder="Title"> <input class="input" type="text" placeholder="Full name"> </div>

我遇到的唯一问题是我希望能够使用实用程序类更改输入的宽度。 例如，第二行的第一个输入具有width: 50px属性。 但是，由于某种原因，这不起作用。 最重要的是，当第一个输入变小时，第二行的第二个输入应该理想地伸展并占据宽度的 rest。 我该如何解决这个问题？ 谢谢你的帮助。

Answer 1

我剥离了您的示例，以便更好地关注解决方案。 下面的代码做你想要的。 我使用width: 50px使输入更小，使用flex-grow: 0来防止它变得更大。 我在其他输入上使用flex-grow: 1以确保它们填满剩余空间。

 .input-group { display: flex; }.input { display: block; height: 20px; line-height: 20px; background-color: #ffffff; border: 1px solid #ddd; flex-grow: 1; }.width-50 { width: 50px; flex-grow: 0; }

 <div class="input-group"> <input class="input" type="text" placeholder="State"> <input class="input" type="text" placeholder="School"> </div> <br /> <div class="input-group"> <input class="input width-50" type="text" placeholder="Title"> <input class="input" type="text" placeholder="Full name"> </div>

Answer 2

我只是确保 class .input.width-50不会增大或缩小，并将 flex-basis 更新为所需的宽度。

    .input.width-50 {
      flex: 0 0 50px;
    }

 .input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; }.input-group >.input { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0; }.input { display: block; width: 100%; height: 20px; line-height: 20px; background-color: #ffffff; border: 1px solid #ddd; }.input.width-50 { flex: 0 0 50px; }

 <div class="input-group"> <input class="input" type="text" placeholder="State"> <input class="input" type="text" placeholder="School"> </div> <br /> <div class="input-group"> <input class="input width-50 " type="text" placeholder="Title"> <input class="input" type="text" placeholder="Full name"> </div>