css⼀列固定⼀列⾃适应布局-flex布局实现
flex布局，弹性盒⼦布局。
声明了display:flex；即变为伸缩容器，在伸缩容器内的所有⼦元素将⾃动变成伸缩项⽬flex items.
常结合使⽤的属性有 dispaly:flex; flex-flow:row;  伸缩项⽬单⾏排列
或者flex-flow:column;  伸缩项⽬单列排列
这⾥利⽤flex布局实现⼀列固定，⼀列⾃适应
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex/calc</title>
html的flex布局
<style>
.box{
width:500px;
height:100px;
line-height: 100px;
border:1px solid #ddd;
color:#fff;
font-size: 20px;
text-align: center;
/*⽗元素添加flex布局*/
display: flex;/*设为伸缩容器*/
flex-flow: row;/*伸缩项⽬单⾏排列*/
}
.box .child{
/*固定宽度*/
width:100px;
height:100px;
background: #ff76bc;
float: left;
}
.box .son{
height:100px;
background: #00c13f;
/*这⾥设置为占⽐1，填充满剩余空间*/
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="child">固定宽度</div>
<div class="son">⾃由缩放</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。