我想在客户页面中心的2个不同输入中显示客户的名字和姓氏，并为每个输入提供最小宽度，以避免两者之间留出多余的间距。
我尝试使用min-width或对输入使用“ size”属性，但是当第一个输入包含太多字符时，这会引起问题。
<div className="input-client-name">
<input value={this.state.fname}/>
<input value={this.state.lname}/>
</div>
.input-client-name {
display: flex;
}
.input-client-name input {
min-width: 0;
max-width: min-content;
}
我期望输出：“ firstName LastName”，而不必担心每个字符的字符长度。
如果您正在使用flexbox，建议不要使用它，width因为我们用flexbox实现响应行为并设置width（偶数max和min宽度）值会失败。
由于您希望输入框根据窗口大小并排显示-您可能希望将第二个输入框包装到下一行-将a添加flex-flow到您的父级。
.input-client-name {
display: flex;
flex-flow: row wrap;
}
flex-flow是flex-direction和flex-wrap属性的组合。
接下来，您要为输入框指定最小宽度，可以使用flex-basis-作为元素的初始大小来实现此最小宽度。
.input-client-name input {
flex-basis: 40%;
margin: 8px;
}
注意：
margin在两个输入框之间添加为空格。您可以选择使用justify-content: space-between或justify-content: space-evenly用于相同目的。
其他参考：
这样做的一个演示小提琴是availale这里。
想更多地了解flexbox？在这里阅读一篇不错的文章。希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句