在父母的中心和右侧对齐 2 个孩子的 flex 问题

如何解决在父母的中心和右侧对齐 2 个孩子的 flex 问题

我有以下 html：

<div id="Box">
   <div class="test1">
     test1
   </div>
   <div class="test2">
     test2
   </div>   
</div>

现在我想将 div 与父级中心 (id="Box")（主轴上）的 class test1 对齐，并将 test2 对齐到父级的右侧。谁能告诉我这是否可以使用 flex 或者我需要其他东西吗？ html 是固定的，无法更改。我想用这个结构来解决它。

这是一个解决它的js小提琴，但我需要在父级中添加第三个div：http://jsfiddle.net/kp1tzcry/54/ 这不是我想要的。我也很想用 flex 来解决它。我知道我可以使用自动边距并向右浮动（如果不需要，我不想这样做）

解决方法

将 function Clock(){ const [count,setCount] = React.useState(0); const custom = useRef(1); const clickHandler = () => { custom.current = 0; setCount(1); } React.useEffect(()=>{ alert(custom.current); }) return (<div> <button onClick={clickHandler}>Click Me</button> </div>); } 添加到您的 align-items: center 将解决您的问题，但是，您当前的结构可能会导致响应式屏幕出现问题。

#box

#box {
  background: #000;
  color: #fff;
  height: 100px;
  cursor: pointer;
}

#box div {
  width: 50%;
  float: left;
  text-align: right;
}

编辑：使用 <div id="box"> <div class="test1"> test </div> <div class="test2"> test2 </div> </div> 和 width: 50%

,

您可以使用 display:block 和将位置父级发送给相对者来实现这一点

这是一个例子

null

#box {
  display: block;
  position:relative;
  background-color: lightgrey;
}

.test {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
}



.test1 {
margin:auto;

}


.test2 {
     position: absolute;
    top: 0;
bottom:0;
    right: 0;
}