看下代码:
<html>
<head>
<style type="text/css">
.div-wrapper {
width: 600px;
background-color: grey;
display: flex;
justify-content: space-between;
}
.input-cls{
width: 100%;
}
.text-cls{
/* flex-shrink: 0; */
}
</style>
</head>
<body>
<div class="div-wrapper">
<input class="input-cls" placeholder="请输入" autofocus=ture></input>
<div class="text-cls">重新发送重新发送</div>
</div>
<script>
</script>
</body>
</html>
这段代码展示如下:
后面的文字成两行了,怎么成一行呢?给这一行元素加一个属性flex-shrink: 0; 就可以了。
flex-shrink用来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。 flex-shrink
的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。
因为input元素设置了width: 100% 所以这个元素尽可能撑大,挤压到后面元素了。
还有没有另外的办法呢?下面代码也可以:
<html>
<head>
<style type="text/css">
.div-wrapper {
width: 600px;
background-color: grey;
display: flex;
justify-content: space-between;
}
.input-cls{
flex: 1
}
</style>
</head>
<body>
<div class="div-wrapper">
<input class="input-cls" placeholder="请输入" autofocus=ture></input>
<div>重新发送重新发送</div>
</div>
<script>
</script>
</body>
</html>
直接给input元素设置 flex: 1 也可以。 效果如下: