百分比+flex设置左右间距
2023-08-20 本文已影响0人
Hasan_hs
需求：实现两个元素左右贴边，宽度自适应且中间留有固定空隙
实现方案：flex+百分比
具体实现：把中间的间距平分给左右元素，设置每个元素宽度时用calc( 百分比 - 平分的间距 )
实现效果：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.lists{
display: flex;
justify-content: space-between;
}
.list{
height:100px;
display: flex;
justify-content: center;
align-items: center;
color:white;
}
.list:first-child{
width: calc( 80% - 30px );
background: red;
}
.list:last-child{
width: calc( 20% - 30px );
background: green;
}
</style>
</head>
<body>
<div class="lists">
<div class="list">80%</div>
<div class="list">20%</div>
</div>
</body>
</html>
