在flex容器中使用input和button元素时,flex
和/或flex-grow
属性似乎没有做任何事情。
代码,演示我的问题。
button,
input {
font-size: 1rem;
}
button {
border: none;
background-color: #333;
color: #EEE;
}
input {
border: 1px solid #AAA;
padding-left: 0.5rem;
}
.inputrow {
width: 30rem;
display: flex;
margin: 0 -.25rem;
}
.inputrow>* {
margin: 0 .25rem;
border-radius: 2px;
height: 1.75rem;
box-sizing: border-box;
}
.nickname {
flex: 1;
}
.message {
flex: 4;
}
.s-button {
flex: 1;
}
<div class="inputrow">
<input type="text" class="nickname" placeholder="Nickname">
<input type="text" class="message" placeholder="Message">
<button type="submit" class="s-button">Submit</button>
</div>
显示我期待的代码。 (使用DIV而不是input
和button
)。
.inputrow {
width: 30rem;
display: flex;
flex-flow: row nowrap;
margin: 0 -.25rem;
}
.inputrow>* {
margin: 0 .25rem;
height: 1.75rem;
}
.nickname {
flex: 1;
background-color: blue;
}
.message {
flex: 4;
background-color: red;
}
.s-button {
flex: 1;
background-color: green;
}
<div class="inputrow">
<div class="nickname">Nickname</div>
<div class="message">Message</div>
<div class="s-button">Submit</div>
</div>
与input
不同,div
元素具有默认宽度。
以下是此设置的简单说明:
浏览器自动为input
提供宽度。
input {
border: 1px solid blue;
display: inline;
}
div {
border: 1px solid red;
display: inline;
}
<form>
<input>
<br><br>
<div></div>
</form>
此外,flex项目的初始设置是min-width: auto
。这意味着物品不能在主轴上收缩到其宽度以下。
因此,input
元素不能收缩到其默认宽度以下,并且可能被迫溢出Flex容器。
您可以通过将输入设置为min-width: 0
(revised codepen)来覆盖此行为
这是一个完整的解释:Why don't flex items shrink past content size?
在某些情况下,您可能需要使用width: 100%
或width: 0
覆盖输入宽度。
我想扩展Michael_B解决方案
在某些情况下,您可能需要使用width:100%或width:0来覆盖输入宽度。
你也可以做calc(100%)