将两个div分别对准父div的中心和末端？

Question

我的父div中有2个div。第一个子div需要在父级中居中，而第二个子div需要在父级中右端。两个孩子都必须在同一条线上。父级的左端必须为空。

我已经尝试过将flex与父级一起使用，以及在子级上使用inline-block和text-align。漂浮的孩子似乎也不起作用。

Here是我的代码的链接。

onStatus

.main {
  border: 2px solid black;
  width: 100%;
}
    
.center {
  display: inline-block;
}
    
.right {
  display: inline-block;
}

“ A”字符必须位于黑匣子的中心，而“ D”字符必须位于黑匣子的最右侧。

Answer 1

这是吗？

ProfileActivity

.main {
  border: 2px solid black;
  width: 100%;
  display:flex;
}

.center {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:flex-end;
}


.right {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:flex-end;
}

或

<div class="main">
  <div class="center">
    <div>A</div>
  </div>
  <div class="right">
    <div>D</div>
  </div>
</div>

.main {
  border: 2px solid black;
  width: 100%;
  display:flex;
}

.center {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:center;
}


.right {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:flex-end;
}