css动态获取对齐-内容

Question

HTML:

<div class="parent">
  <div class="right"></div>
  <div class="left"></div>
</div>

SCSS:

.parent{
      display: flex;
      align-items: center;
      justify-content: space-between;
}

Answer 1

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>

Answer 2

您可以给.parentjustify-content:center，并给.leftmargin-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>