flex布局 一侧固定宽度 一侧自适应
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex布局 一侧固定宽度 一侧自适应相关的知识，希望对你有一定的参考价值。
参考技术A flex布局 一侧固定宽度 一侧不管布局是弹性布局 左边图片 右边文字
相同宽度 的div中放入图片并且让图片宽度保持div的宽度 高度自适应
可以看到在 左边的图片被挤压变形
解决办法就是 给右侧的div 开启 flex：1； 自适应
flex布局 一侧固定宽度 一侧自适应
可以看到问题立马就解决了。
flex左侧固定宽度，右侧自适应布局
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.f{display:flex;} .f1{flex:1;}
.ac{align-items:center;}
.w50px{width:50px;}
.w100{width:100%}
.form-control{height:32px; border-radius:4px; outline:0; border:1px solid #ccc; padding:4px 11px; transition: all .3s;box-sizing:border-box;}
.form-control:focus{border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);}
</style>
</head>
<body>
<div class=‘f ac‘>
<label class=‘w50px‘ for=‘myName‘>姓名：</label>
<div class=‘f1‘>
<input placeholder="请输入" class=‘form-control w100‘ id=‘myName‘ />
</div>
</div>
</body>
</html>
效果图
以上是关于flex布局 一侧固定宽度 一侧自适应的主要内容，如果未能解决你的问题，请参考以下文章