flex布局案例-输入框布局
大约 1 分钟约 300 字
flex 布局案例-输入框布局
可用F12开发者工具查看元素及样式，可打开 codepen 在线编辑代码。
<html>
<div class="InputAddOn">
<span class="InputAddOn-item">icon</span>
<input class="InputAddOn-field" placeholder="input宽度自适应" />
<button class="InputAddOn-item">提交</button>
</div>
<br />
<div class="Media">
<div class="Media-figure">左侧固定</div>
<p class="Media-body">
右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
</p>
</div>
</html>
<style>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
width: 100px;
height: 100px;
background: #eee;
margin-right: 1em;
}
.Media-body {
flex: 1;
}
/* 基础样式 */
input:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
input {
outline-color: invert;
outline-style: none;
outline-width: 0px;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
box-shadow: none;
}
.InputAddOn-item {
width: 100px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
background: #eee;
}
.InputAddOn-field {
height: 30px;
padding: 1px 6px;
border: 1px solid #ccc;
border-left: none;
border-right: none;
}
</style>
参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html