比例分布 1:1 ，也可以1:n , n:1 我这里只写了1:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右相等宽度布局</title>
</head>
<style type="text/css">
.content{
display:flex;
min-height:100px;
}
.left{
flex:1;
background-color:red;
}
.right{
flex:1;
background-color:blue;
}
</style>
<body>
<div class="content">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
左右比例为1
左边固定，右边自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右相等宽度布局</title>
</head>
<style type="text/css">
.content{
display:flex;
min-height:100px;
color:#fff;
}
.left{
width:100px;
background-color:red;
}
.right{
flex:1;
background-color:blue;
}
</style>
<body>
<div class="content">
<div class="left">左边 宽度100px</div>
<div class="right">右边 宽度自适应</div>
</div>
</body>
</html>
左边固定，右边自适应
网友评论