HTML:
<div class="parent">
<div class="right"></div>
<div class="left"></div>
</div>
SCSS:
.parent{
display: flex;
align-items: center;
justify-content: space-between;
}
您可以给.parent
justify-content:center
,并给.left
margin-right:auto
,这样当它存在时,它就会将自己推到右边,将左div推到左边。
像这样:
null
.parent {
display: flex;
align-items: center;
justify-content: center;
}
.left {
margin-right: auto;
}
<div class="parent">
<div class="right">only right content</div>
</div>
<div class="parent">
<div class="left">left content</div>
<div class="right">right content</div>
</div>
null
.parent{
display: flex;
justify-content: center;
width: 100%;
height: 50px;
background: green;
padding: 10px;
}
.box {
display: flex;
margin: auto;
width: 150px;
height: 50px;
background: blue;
}
<div class="parent">
<div class="right box">right</div>
</div>
<br />
<br />
<br />
<div class="parent">
<div class="right box">right</div>
<div class="left box">right</div>
</div>