console
<span></span>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #D66464;
display:flex;
}
.clearfix:after {
content: "";
display:inline-block;
}
.left {
flex:1;
background: #00f;
}
.right {
flex:2;
background: #0f0;
}
.center {
flex:3;
background: #FFFFFF;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div>
<div class="right">right，宽度固定，高度可固定也可以由内容撑开。</div>
<div class="center">center，可以自适应浏览器1111111111宽度，高度可固定也可以由内容撑开。</div>
</div>
</body>
</html>
span{
display: block;
height:100px;
width:100px;
border-radius:50%;
background:radial-gradient(circle,rgba(2,2,2,0),rgba(255,199,198,0.5),rgba(198,255,124,0.7));
border:1px solid red;
}