提问者:小点点

css动态获取对齐-内容


HTML:

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

SCSS:

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

共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>

匿名用户

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>