.g {
display:flex;
height:50px;
width:100%;
background: green;
}
.l {
height:100%;
aspect-ratio:1;
background: red;
margin-right:auto;
}
.r {
height:100%;
aspect-ratio:1;
background: blue;
}
<div class='g'>
<div class='l'>L</div>
<div class='r'>R</div>
</div>
.g {
display:flex;
height:50px;
width:100%;
background: green;
}
.l {
height:100%;
aspect-ratio:1;
background: red;
margin-right:auto;
}
.r {
height:100%;
aspect-ratio:1;
background: blue;
}
.C {
height:100%;
aspect-ratio:1;
background: #000;
color:#fff;
margin: 0 auto;
}
.l {
margin:unset;
}
<div class='g'>
<div class='l'>L</div>
<div class='C'>C</div>
<div class='r'>R</div>
</div>
当中间出现一个方块时,需要修复左边
.l {
margin:unset;
}
否则,中心块将不会居中。
问题是是否可以通用,这样你就不必再次修复左侧的块。
最初在左侧块
margin-right:auto;
否则右边的方块不会被压到右边缘...